Question

今天我在创建导航栏时遇到了一个问题，我在屏幕和导航栏之间找到了一个空格， 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>

Answer 1

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

body{
margin: 0;
padding: 0;
}

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

Answer 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>标记始终存在，即使没有明确写入。这可以在这里的片段中看到 - 请注意原始片段似乎偏离边缘和线，而这不是，我添加的所有内容都是body边距的覆盖。

希望这有帮助！：）

导航栏和屏幕之间的空间

2 个答案: