我现在所拥有的#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>
&#13;
答案 0 :(得分:1)
这是因为你的#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>
答案 1 :(得分:1)
更改此课程。试试这个。
#nav-bar {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 38px;
top: 0;
left: 0;
word-spacing: 30px;
}
&#13;
答案 2 :(得分:0)
在body
中添加overflow-x:hidden css body {
margin: 0;
border: 0;
overflow-x: hidden;
}
#container {
position: relative;
}
h1 {
position: absolute;
font-size: 90px;
top: 100px;
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>