Question

我目前正在创建一个网站，只是为了搞乱CSS和HTML，但是，我的导航栏遇到了问题。我创建了它，然而，当我将我的徽标放在页面顶部，导航栏上方时，导航栏向下移动到页面中间，我不知道如何移动它，使其位于徽标下方。从我记忆中发生的事情发生在我放入另一张我尚未定位的图像时，但即使在移动该图像后，导航栏也没有移回原点。我尝试将它的位置设置为固定，但它将其移动到屏幕的左侧。

另外，如何在不破坏导航栏的情况下在我的网站中移动第二张图像？

这是我的CSS：

#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}

#image2 {
position: relative;
width: 20%;
top: 400px;
right: 481px;

}
ul {
list-style-type:none;
width:60%;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}

li {
float: right;
width: 33.33%;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}

li a:hover {
background-color: #111;
}

body {
background-color: rgba(96,96,96,1.00)
}

这是我的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>    LoL    </title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>  
<img src="assets/lol.png" alt="Logo" id="image1">
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >

<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<banner></banner>
</body>
</html>

Answer 1

在图像1的CSS中，将高度从百分比更改为像素。（比如150px）

Image1 { height: 150px; }

然后用你的ul元素试试

Ul {
Top: 150px;
Display: Fixed;
}

那应该位于徽标下方的导航栏！

使用浏览器中的开发工具查看发生的情况。 I.E利润率下降等在Chrome上，您可以右键单击并检查元素＆＃34;。

如何将导航栏移到徽标下方并使其停留在那里？

1 个答案: