我是网络开发新手，这是我正在构建的第一个网站。
我在导航栏上花了一段时间，但我无法让导航栏的宽度达到容器的末端。我附上了一张图片来展示我遇到的问题。
1图片和导航栏都在容器内，但我希望它们都排成一行。
HTML 和 CSS:
<html>
<body>
<div class="header">
<div class="container">
<div class="logo"></div>
<div id="nav">
<ul>
<li><a class="active" href="#index">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div class="cover"></div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body {
background-color: #505290 !important;
}
.header {
background-image: url(nlbg.jpg);
background-size: cover;
background-position: center center;
height: 10em;
width: 100%;
}
.logo {
content: url(nnlogo.png);
height: 120px;
}
#nav ul {
list-style-type: none;
background-color: #333;
text-align: center;
padding: 0;
margin: 1.4em;
}
#nav li {
font-family: arial, sans-serif;
font-size: 1.5em;
line-height: 40px;
height: 40px;
display: inline-block;
width: 19%;
}
#nav a{
display: block;
color: white;
}
#nav a:hover {
background-color: #111;
}
#nav a.active {
background-color: #black;
color: #505290;
}
.cover {
content: url(cover.jpg);
}
</style>
</body>
</html>最佳答案
这是因为你有 top/left/bottom/right 1.4em 的边距 在你的导航栏上。如果您想保留 top/bottom 边距，只需将其设置为 margin:1.4em 0; 即可将 left 归零/右边边距。
body {
background-color: #505290 !important;
}
.header {
background-image: url(nlbg.jpg);
background-size: cover;
background-position: center center;
height: 10em;
width: 100%;
}
.logo {
content: url(nnlogo.png);
height: 120px;
}
#nav ul {
list-style-type: none;
background-color: #333;
text-align: center;
padding: 0;
margin: 1.4em 0;
}
#nav li {
font-family: arial, sans-serif;
font-size: 1.5em;
line-height: 40px;
height: 40px;
display: inline-block;
width: 19%;
}
#nav a{
display: block;
color: white;
}
#nav a:hover {
background-color: #111;
}
#nav a.active {
background-color: #black;
color: #505290;
}
.cover {
content: url(cover.jpg);
}<body>
<div class="header">
<div class="container">
<div class="logo"></div>
<div id="nav">
<ul>
<li><a class="active" href="#index">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div class="cover"></div>
</div>
</div>
</body>关于html - 导航栏与容器的宽度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45985945/