导航栏和屏幕之间的空间[重复]答案

【问题标题】：Space between navigation bar and screen [duplicate]导航栏和屏幕之间的空间[重复]
【发布时间】：2017-11-29 22:03:34
【问题描述】：

我今天在创建导航栏时遇到了一个问题，我发现屏幕和导航栏之间有一个空间， here's what I'm talking about

我想要全宽的导航栏，完全没有空间，我尝试使用宽度width: 100%，但没有成功。

代码如下：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #141414;
    height: 80px;
    border-radius: 5px;
}

li {
    float: right;
    display:inline;
    list-style-type:none;
}

li a {
    font-family: Julius Sans One, Arial;
    font-size: 19px;
    display: block;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
}

.logoimg {
    height: auto;
    margin-left: 150px;
    margin-top: 5px;
}

.left {
    float: left;
}

<div>
     <ul>
        <li class="left"><img class="logoimg" src="/images/logo.png"></li>
        <li><a>Test 1</a></li>
        <li><a>Test 2</a></li>
     </ul>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您遇到的是默认窗口/页面填充/边距。您可以将此默认值设置为 0 以获得页面的完整宽度/高度：

body{
margin: 0;
padding: 0;
}

这应该可以解决您的问题。

【讨论】：

【解决方案2】：

从外观上看，您的导航栏是全宽的。您看到的额外空白实际上来自<body>，默认情况下它添加了margin 的8px。您可以覆盖它以确保您的内容与页面边缘齐平：

body {
  margin: 0; /* Added */
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #141414;
    height: 80px;
    border-radius: 5px;
}

li {
    float: right;
    display:inline;
    list-style-type:none;
}

li a {
    font-family: Julius Sans One, Arial;
    font-size: 19px;
    display: block;
    color: white;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
}

.logoimg {
    height: auto;
    margin-left: 150px;
    margin-top: 5px;
}

.left {
    float: left;
}

<div>
     <ul>
        <li class="left"><img class="logoimg" src="/images/logo.png"></li>
        <li><a>Test 1</a></li>
        <li><a>Test 2</a></li>
     </ul>
</div>

请务必注意，<body> 标记始终存在，即使未明确写入也是如此。这可以在此处的 sn-ps 中看到 - 请注意，原始 sn-p 似乎从边缘和线偏移，而事实并非如此，我添加的只是对 body 边距的覆盖。

希望这会有所帮助！ :)

【讨论】：