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

【问题标题】：Navigation bar won't entirely fill screen width导航栏不会完全填满屏幕宽度
【发布时间】：2020-10-29 00:35:34
【问题描述】：

我已经开始使用 nav 标签制作导航栏，效果很好。使用 CSS，我将导航标签的宽度设置为 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;
}

我能做些什么来解决这个问题？

【问题讨论】：

nav { margin: 0; padding: 0;} body { margin: 0; padding: 0; }
现在我的网站顶部有 1 像素的空白区域。是否可能是由于导航栏内的元素？
我是个白痴，那是谷歌浏览器。

标签： html css

【解决方案1】：

将正文设置为边距 0

CSS

body{
 margin: 0px;
}

【讨论】：

谢谢。我忙于查看导航样式，完全忽略了显而易见的内容。

【解决方案2】：

默认情况下，所有 HTML 文档的四个角都有一个边距。在大多数情况下，与边距一样可取，有时它们与您的设计一样，例如水平跨越整个页面的标题栏。在这种情况下，您必须将 0 显式分配给正文的边距。

body{
 margin: 0px;
}

@Luis P.A

给出的答案的解释

【讨论】：

【解决方案3】：

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

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

所有浏览器都有一些默认的 CSS 规则。使用这个 css 规则 i 它将重置浏览器默认 css...

【讨论】：

不要这样做。使用 Normalize 或 CSS 重置样式表。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

同时添加 CSS：

* { box-sizing : border-box; }

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

【讨论】：

【解决方案7】：

只需添加导航宽度

导航

{

宽度：100%；

}

【讨论】：