Question

我是网络开发人员的新手，这是我建立的第一个网站。

我已经在导航栏上花了一段时间，但我无法让条的宽度到达容器的末端。我已经包含了一张图片，以显示我遇到的问题。

1图片和导航栏都在容器内，但我希望它们都排成一行。

HTML＆amp; CSS：

＆＃13;

<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>

＆＃13;

Answer 1

这是因为您的导航栏上有top / left / bottom / right页边距1.4em。如果您想保留top / bottom保证金，只需将其设置为margin:1.4em 0;即可将left / right保证金归零。

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>

Answer 2

尝试调整ul上的边距：

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(https://placehold.it/800x800);
}

ul {
  margin: 0;
}

<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>

Answer 3

您的#nav ul 1.4em边距会在您的导航ul左侧添加边距。将margin-left设置为0。

导航栏与容器的宽度不同

3 个答案: