Question

如果您在我的网站http://imronan.co注意到每当我按下菜单按钮以显示下拉菜单时，它就会将图像移到其下方。我真的很困惑为什么会这样。我只是想在按下菜单按钮时向下移动以显示菜单项。

我的相关CSS：

body {
position: absolute;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}

a {
color: aliceblue;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
/* no underline */
}

.album {
-webkit-box-reflect: below -10px -webkit-gradient(linear, left top,left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));
}


.album img {
height: 350px;
width: 350px;
}

...

/*MENU*/
.burgermenu {
z-index: 100000000;
position: static;
margin: 0px 0px;
overflow: hidden;
}

.burgermenu ul {
list-style-type: none; 
list-style-image: none;
}

.burgermenu li {
padding: 0.5em 0.5em;
float: left;    
}

.burgermenu a {
font-weight: 400;
color: burlywood;
text-shadow: 1px 1px 0px #000;
}

.burgermenu a:hover {
text-decoration: underline;
color: aliceblue;
}

此外，任何人都知道如何修复反射，以便将鼠标悬停在菜单按钮上时不会出现故障？

Answer 1

如果您进入开发者模式并单击图像或菜单栏，它将显示CSS更改位置或无论如何都会更改。我相信菜单只会覆盖一些CSS更改。 Chrome中的F12，你可以搞乱CSS

Answer 2

刚看了一下CSS和html。它与div标签专辑有关。它改变了大小，因此向左移动了一下。你将不得不搞乱那个div标签或CSS

Answer 3

将margin: auto;和width: 350px;添加到您的<div class="container">

当我的菜单打开时，为什么我的图像会像这样移动？

3 个答案: