導航欄不會延伸到網頁的邊緣

我想讓我的導航欄延伸到頁面的其餘部分，但不知何故它看起來像這樣：current navigation bar。導航欄不會延伸到網頁的邊緣

此外，您可以看到頂部和側面有白色邊框，有沒有辦法解決？我嘗試了各種方法，但並沒有改變。任何幫助將不勝感激！

HTML & CSS代碼：

 <html> 
     <head> 

     <style> 

    @import url(https://fonts.googleapis.com/css?family=Lora); 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 

     body { 
      margin: 0px; 
      padding: 0px; 
      } 


     .nav-bar-block { 

      margin: 0px; 
      padding: 0px; 
      overflow: hidden; 
      background-color: #F8F8F8; 
      background-size: cover; 
      border-bottom: 1px; 
      border-bottom-color: dimgray; 
      display: inline-block; 

     } 

     .nav-bar-block h1 { 
      text-align: center; 
      font-family: Lora, sans-serif; 
      color: #4b4b4b; 
      font-size: 45px; 
      padding: 0px 400px; 

     } 

     .nav-bar-menu { 
      list-style-type: none; 

     } 

     </style> 
    </head> 


    <body> 

     <div class="nav-bar-block"> 
     <h1>Title</h1> 
     </div> 
    </body> 

</html>

來源

2016-08-23 C. Lagos

如果更改.nav杆塊到

display: block;

，那麼你會得到頂部全寬（inline-block的意思的東西顯示出來旁邊的元素，但塊意味着他們將佔據整行內容）。

 body { 
 
      margin: 0px; 
 
      padding: 0px; 
 
      } 
 

 

 
     .nav-bar-block { 
 

 
      margin: 0px; 
 
      padding: 0px; 
 
      overflow: hidden; 
 
      background-color: #F8F8F8; 
 
      background-size: cover; 
 
      border-bottom: 1px; 
 
      border-bottom-color: dimgray; 
 
      display: block; 
 

 
     } 
 

 
     .nav-bar-block h1 { 
 
      text-align: center; 
 
      font-family: Lora, sans-serif; 
 
      color: #4b4b4b; 
 
      font-size: 45px; 
 
      padding: 0px 400px; 
 

 
     } 
 

 
     .nav-bar-menu { 
 
      list-style-type: none; 
 

 
     }

 <html> 
 
     <head> 
 

 
     <style> 
 

 
    @import url(https://fonts.googleapis.com/css?family=Lora); 
 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 
 

 

 

 
     </style> 
 
    </head> 
 

 

 
    <body> 
 

 
     <div class="nav-bar-block"> 
 
     <h1>Title</h1> 
 
     </div> 
 
    </body> 
 

 
</html>

來源

2016-08-23 18:41:55

謝謝!!它工作 - 任何想法爲什麼頂部有白色邊框？我是否需要修理我的填充物或..？ –

我不完全確定 - 如果您想用完整的代碼片段更新您的原始帖子，那將更容易確定。我有一種感覺，有一種不同的風格是相互衝突的。您可以通過檢查元素來使用Chrome開發人員工具。滾動到底部並查看框模型 - 它會告訴您是否存在通過任何樣式應用的填充/邊距/邊框。 –

這是完整的代碼，所以我不確定可能會有什麼衝突。儘管謝謝您的幫助！欣賞它。 –

添加到您的CSS和您的導航欄應該有全寬：

<html> 
    <head> 

    <style> 

@import url(https://fonts.googleapis.com/css?family=Lora); 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab"> 

    body { 
     margin: 0px; 
     padding: 0px; 
     } 


    .nav-bar-block { 

     margin: 0px; 
     padding: 0px; 
     overflow: hidden; 
     background-color: #F8F8F8; 
     background-size: cover; 
     border-bottom: 1px; 
     border-bottom-color: dimgray; 
     display: inline-block; 

    } 

    .nav-bar-block h1 { 
     text-align: center; 
     font-family: Lora, sans-serif; 
     color: #4b4b4b; 
     font-size: 45px; 
     padding: 0px 400px; 

    } 

    .nav-bar-menu { 
     list-style-type: none; 

    } 
    .nav-bar-block { 
     /*Makes the navbar's width full*/ 
     width: 100%; 
    } 

    </style>

<body> 

    <div class="nav-bar-block"> 
    <h1>Title</h1> 
    </div> 
</body>

來源

2017-06-02 06:40:09

導航欄不會延伸到網頁的邊緣

回答

相關問題