导航栏不会延伸到网页的边缘

我想让我的导航栏延伸到页面的其余部分，但不知何故它看起来像这样：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

导航栏不会延伸到网页的边缘

回答

相关问题