导航栏两侧的白色 space html

Question

我对编写 html 还很陌生，这是我第一次尝试创建导航栏。我遇到的问题是栏的两边都有（不同程度的）白色 space。我做了一个快速模型和屏幕截图来展示我的意思：Image

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

我的代码如下：

#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>

如有任何帮助，我们将不胜感激！
另外，对于此 post!

的任何格式问题，我们深表歉意

Answer 1

像这样在无序列表上重置保证金：

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

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

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

看图

大多数 CSS 框架（Bootstrap、基金会等）或 reset.CSS 和 Modifyer.CSS 都考虑了此重置。

看到你解决了DEMO

Answer 2

您也可以通过删除 <li>

上的浮动来解决此问题

#navbar li {
  width: 20%;
  text-align: center;
  display: table-cell;
  background-color: #FAFAD2;
}

工作示例： https://fiddle.jshell.net/8cbhvj6o/

Answer 3

我认为你无法享受 css

的平静

#navbar {margin: 0px; padding: 0px; width: 100%; }

对于您网站顶部的菜单，请使用 posistion:fixed;在游览#navbar

导航栏两侧的白色 space html

White space on either side of navbar html

html

css

whitespace

hide

removing-whitespace