我现在拥有的#nav-bar的背景颜色不会在左侧显示，我希望它在所有顶部宽度（直观上是100％宽度）中显示。这很奇怪，因为即使我说宽度为100％，也正好是我想要的宽度大小，但是好像背景颜色向右移动时，图像的右侧只有白色空间。它从中间出现第一个文本的地方开始，到我所说的最右边结束，那里有额外的空白。
body {
margin: 0;
border: 0;
}
#container {
position: relative;
}
h1 {
position: absolute;
font-size: 90px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
img {
width: 100%;
height: 1000px;
margin: -287px -100px 0px 0px;
}
#nav-bar {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 38px;
top: 0;
left: 31%;
word-spacing: 30px;
}
#nav-bar {
width: 100%;
height: 70px;
background-color: black;
}
#nav-bar {
opacity: .30;
filter: (opacity=30);
}
li {
display: inline;
color: white;
}
li a {
text-decoration: none;
}
li a:hover {
opacity: 0.5;
}<body>
<div id="container">
<img src="...">
<h1>IndieForwardMusic</h1>
<ul id="nav-bar">
<li id="li-1">Home</li>
<li id="li-2">About</li>
<li id="li-3">
<a href="..."></a>
</li>
<li id="li-4">Contact</li>
</ul>
</div>
</body>最佳答案
这是因为您的#nav-bar具有left: 31%，所以它是从中间开始的。因此设置left: 0将适合您的容器。检查以下代码片段以供参考。
body {
margin: 0;
border: 0;
}
#container {
position: relative;
}
h1 {
position: absolute;
font-size: 90px;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
img {
width: 100%;
height: 1000px;
margin: -287px -100px 0px 0px;
}
#nav-bar {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 38px;
top: 0;
left: 0;
word-spacing: 30px;
}
#nav-bar {
width: 100%;
height: 70px;
background-color: black;
}
#nav-bar {
opacity: .30;
filter: (opacity=30);
}
li {
display: inline;
color: white;
}
li a {
text-decoration: none;
}
li a:hover {
opacity: 0.5;
}<body>
<div id="container">
<img src="...">
<h1>IndieForwardMusic</h1>
<ul id="nav-bar">
<li id="li-1">Home</li>
<li id="li-2">About</li>
<li id="li-3">
<a href="..."></a>
</li>
<li id="li-4">Contact</li>
</ul>
</div>
</body>关于html - 为什么菜单的背景颜色仅从图像的顶部到中心而不是全部开始？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46723323/