導航條與容器寬度不一樣

我對web dev非常陌生，而且這是我構建的第一個網站。導航條與容器寬度不一樣

我已經在導航欄上花了一段時間，但我無法獲得達到容器末端的寬度。我收錄了一張照片來展示我遇到的問題。

1圖片和導航欄都在容器內，但我希望他們都排隊。

HTML CSS &：

<html> 
 
     <body> 
 
     \t \t <div class="header"> 
 
     \t \t \t \t <div class="container"> 
 
     \t \t \t \t \t <div class="logo"></div> 
 
     \t \t \t \t \t <div id="nav"> 
 
     \t \t \t \t \t \t <ul> 
 
     \t \t \t \t \t \t \t <li><a class="active" href="#index">Home</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#news">News</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#music">Music</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#about">About Us</a></li> 
 
     \t \t \t \t \t \t \t <li><a href="#contact">Contact Us</a></li> 
 
     \t \t \t \t \t \t </ul> 
 
     \t \t \t \t \t </div> 
 
     \t \t \t \t \t <div class="cover"></div> 
 
     
 
     \t \t \t \t </div> 
 
     
 
     
 
     \t \t </div> 
 
     \t <!-- Latest compiled and minified JavaScript --> 
 
     \t <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 { 
 
     \t background-color: #505290 !important; 
 
     } 
 
     
 
     .header { 
 
     \t background-image: url(nlbg.jpg); 
 
     \t background-size: cover; 
 
     \t background-position: center center; 
 
     \t height: 10em; 
 
     \t width: 100%; 
 
     
 
     } 
 
     
 
     .logo { 
 
     \t content: url(nnlogo.png); 
 
     \t 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>

來源

2017-08-31 ThatWain

保證金0在ul。 –

這是因爲您的導航欄上有一個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>

來源

2017-08-31 16:20:09 APAD1

哈哈我很驚訝這件事很簡單， D喜歡承認這個問題以及大聲笑感謝您的幫助！ – ThatWain

非常歡迎您！請記住，默認情況下，「無序列表」將由瀏覽器對其應用「邊距」，因此當您將它們用於導航時，您需要取消或覆蓋該默認邊距。 – APAD1

-1

嘗試調整在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>

來源

2017-08-31 16:19:58 sol

只是刪除邊距將會做出比預期更多的更改。將margin-left設置爲0，並保留其餘部分，假設您實際上需要圍繞頂部/底部/右側的邊距。 – Daniel

@丹尼爾不夠公平，但答案會讓OP很明顯地知道問題出在哪裏，他可以根據自己的意願進行微調... – sol

-1

你1.4em的#nav ul利潤率增加保證金，以你的資產淨值UL的左側。將margin-left設置爲0。

來源

2017-08-31 16:20:18 Daniel

導航條與容器寬度不一樣

回答

相關問題