删除导航栏（不可见）填充

Question

我正在尝试在我的网站上创建一个水平导航栏。问题是当我将鼠标悬停在其中一个选项上时。它被突出显示但不是我想要的。这是结果：

如您所见，有些 space 也应该突出显示，但实际上没有。

我的 Html 和 CSS:

.section ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background-color: #5fb763;
}
.section ul li {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8em;
  width: 200px;
  height: 100%;
}
.section ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
.section ul li a:hover {
  background-color: #f0f0f0;
  height: 100%;
}
.section ul li a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}

<body>
  <ul>
    <li class="home"><a href="#section1">El local</a>
    </li>
    <li class="tutorials"><a href="#section2">Como Llegar</a>
    </li>
    <li class="about"><a class="active">Historia</a>
    </li>
  </ul>
  <hr />
  <hr />
</body>

Answer 1

如果不需要支持IE8。我会考虑使用 nav 标签来代替您的需要。考虑以下片段；

nav {
  text-align: center;
  background-color: green;
}
nav a {
  text-decoration: none;
  color: #fff;
  transition: .3s background-color;
}
nav a:hover {
  background-color: #f0f0f0;
}
nav a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}

<body>
  <nav>
    <a href="#section1">El local</a>
    
    <a href="#section2">Como Llegar</a>

    <a class="active">Historia</a>
  </nav>
</body>

使用您当前的解决方案，您需要浮动 li 元素，以便在我相信的指定宽度下获得正确的行为。您也可以考虑使用 flexbox 解决方案。

有一些创建 CSS 导航栏的简单指南 here。

希望对您有所帮助！

Answer 2

在li

中添加line-height

line-height: 21px;

    .section ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  text-align: center;
  background-color: #5fb763;
}
.section ul li {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8em;
  width: 200px;
  height: 100%;
  line-height: 21px;
}
.section ul li a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
.section ul li a:hover {
  background-color: #f0f0f0;
  height: 100%;
}
.section ul li a.active {
  background-color: rgba(198, 186, 186, 0.73);
  color: #444;
}

<div class="section">
  <ul>
    <li class="home"><a href="#section1">El local</a>
    </li>
    <li class="tutorials"><a href="#section2">Como Llegar</a>
    </li>
    <li class="about"><a class="active">Historia</a>
    </li>
  </ul>
</div>

删除导航栏（不可见）填充

Remove navigation bar (invisible) padding

html

css

navbar