Question

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

正如你所看到的，还有一些空间应该突出显示，但事实并非如此。

我的Html和CSS：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

如果您不需要支持IE8。我会考虑使用nav标签代替您的需求。请考虑以下代码段;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用您当前的解决方案，您需要浮动li元素，以便获得具有指定宽度的正确行为。您还可以考虑使用flexbox解决方案。

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

希望能帮到你！

Answer 2

在line-height

中添加li

line-height: 21px;

＆＃13;

    .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;
}

＆＃13;

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

＆＃13;

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

2 个答案: