Question

我试图让我的导航栏扩展到页面的其余部分，但不知怎的，它看起来像这样：current navigation bar。

此外，您可以看到顶部和侧面有白色边框，有没有办法修复？我尝试了各种各样的方法，但它没有改变。任何帮助将不胜感激！

HTML＆amp; 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>

Answer 1

如果您将.nav-bar-block更改为

<configuration>

    <!--                           TEST                                 -->
    <environment id="TEST">
        <client>ABC</client>
        <type>Test</type>
        <filetype>ALL</filetype>
        <enable>yes</enable>
    </environment>

</configuration>

然后你将得到顶部的全宽（内联块意味着东西显示在一个元素旁边，但是块意味着它们将占据整行内容）。

display: 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;  

        }

Answer 2

将此添加到您的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>

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

2 个答案: