html - 导航栏 html 两侧的空白

Question

我对编写 html 非常陌生，并且是第一次尝试创建导航栏。我遇到的问题是栏的两边都有(不同程度的)空白。我制作了一个快速模型和屏幕截图来展示我的意思:Image

在过去的几个小时里，我花了很多时间来解决类似的问题，有时甚至是相同的问题，但我尝试过的解决方案都没有奏效。

我的代码如下:

#navbar {
  margin: 0px;
  padding: 0px;
  width: auto;
}
#navbar ul {
  background-color: #FAFAD2;
}
#navbar li {
  float: left;
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}
#navbar li a {
  display: block;
  color: #4682B4;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navbar li a:hover:not(.active) {
  background-color: #FAF0E6;
}
#navbar .active {
  background-color: #FAFAD2;
}
#header {
  width: 100%;
  text-align: center;
  position: relative;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<div id="header">
  <h1>Reserved</h1>
</div>
<div id="navbar">
  <ul>
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href=“#Experience”>Experience</a>
    </li>
    <li><a href=“#Consulting Services“>Consulting Services</a>
    </li>
    <li><a href=“#Contact”>Contact</a>
    </li>
    <li><a href=“#About”>About</a>
    </li>
  </ul>
</div>

如有任何帮助，我们将不胜感激!
另外，对于这篇文章的任何格式问题，我们深表歉意!

Answer 1

像这样在你的无序列表上重置你的 margin :

#navbar ul {
    background-color: #FAFAD2;
    margin-left: -40px; /*solution 1 */
    padding:0; /*solution 2 */
}

除非您使用重置 css 或某些框架来提供您的 UL 特定说明，否则您可以预期浏览器的说明是默认的。在这种情况下 (Chrome) 浏览器用户代理添加 40px 边距开始。您已补偿它以使其无效。

李斯特先生的解决方案 2 也适用。但是，稍后在另一次遭遇中你仍然需要处理那些 40px。我宁愿缩进我想要的 UL，而不是浏览器认为最好的 ;)

看图

大多数 CSS 框架(Bootstrap、foundation 等)或 reset.CSS 和 Modifyer.CSS 都考虑了这种重置。

查看您已解决的问题 DEMO