Question

我已经开始使用导航标签创建导航栏，这非常有效。使用CSS，我将nav标签的宽度设置为100％，边框和填充设置为0.

我似乎在导航栏的每一侧都有几个像素没有被填满。我希望导航栏覆盖整个宽度，但我无法使其工作。这是我的HTML：

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li>
            <a href="test1.html">Test1 <span class="carrot"></span></a>
            <div>
                <ul>
                    <li><a href="test#testA">TestA</a></li>
                    <li><a href="test.html#B">TestB</a></li>
                    <li><a href="teset.C">TestC</a></li>
                </ul>
            </div>
        </li>
        <li><a href="test2.html">Test2</a></li>
        <li><a href="test3.html">Test3</a></li>
    </ul>
</nav>

的CSS：

nav {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin: 8px 22px 8px 22px;
    overflow: hidden;
    width: 100%; 
    margin: 0;
    padding: 0;
}

我该怎么做才能解决这个问题？

Answer 1

将正文设置为边距0

<强> CSS

body{
 margin: 0px;
}

Answer 2

默认情况下，所有HTML文档都有一个围绕其四个角的边距。在大多数情况下，边距是理想的，有时它们与您的设计一致，例如横向跨越整个页面的标题栏。在这种情况下，您必须明确地将0指定给正文的边距。

body{
 margin: 0px;
}

解释 @Luis P.A

给出的答案

Answer 3

nav {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    /* margin: 8px 22px 8px 22px; */
    /* overflow: hidden; */
    /* width: 100%; */ 
    margin: 0;
    padding: 0;

    /* notice below: */
    position: fixed;
    left: 0;
    right: 0;
}

Answer 4

使用以下CSS规则启动所有项目：

*{
border: 0;
padding: 0;
margin: 0;
}

所有浏览器都有一些默认的css规则。有了这个css规则，它将重置浏览器默认的css ...

Answer 5

始终在css样式表文档中使用第一行：

     * {
     box-sizing: border-box;
  }
     body, html {
     margin: 0 auto;
     padding: 0;
  }

Answer 6

您可以通过“规范化”消除浏览器上的预设，只需在头部添加此链接：

“https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css”

还要添加CSS：

refs/heads/

我还不知道如何使用Markdown，如果需要的话......

Answer 7

只需添加导航宽度

导航

{

宽度：100％；

}

导航栏不会完全填满屏幕宽度

7 个答案: