CSS 菜单 - 带有悬停突出显示的文本间距答案

【问题标题】：CSS Menu - text spacing with hover highlightingCSS 菜单 - 带有悬停突出显示的文本间距
【发布时间】：2014-05-22 01:09:00
【问题描述】：

页面布局：960 像素宽，居中。然而，导航栏是 100% 宽，导航栏中的链接以 960 像素为中心。导航栏的背景为#333333。我希望单词间隔 20 像素。当我将鼠标悬停在链接上时，我希望背景颜色突出显示左侧 10 像素和右侧 10 像素的文本，这样看起来不错。每当我似乎悬停在上面时，它都会增加额外的间距。当我从 a:hover 中删除它时，背景会消除单词之前/之后的任何填充。任何帮助将不胜感激！

HTML

<div class="navbar">
  <div class="navbar_menu">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

CSS

.navbar {
  background-color: #333;
  width: 100%;
}

.navbar_menu {
  margin: 0 auto;
  width: 960px;
}

.navbar_menu ul {
  list-style: none;
}

.navbar_menu ul li {
  display: inline;
}

【问题讨论】：

标签： html css

【解决方案1】：

这似乎对我有用。当您提到“间隔”时，您通常指的是填充或边距。这些是需要学习的重要概念——那里有很多很棒的教程。我在列表项内的链接的左侧和右侧添加了填充。因为您没有为每个列表项指定宽度，所以链接会确定大小并在每边添加 10px，从而在每个项之间留出 20px 的空间。

.navbar {
  background-color: #333;
  width: 100%;
  text-align: center;
}

.navbar_menu {
  margin: 0 auto;
  max-width: 960px;
  text-align: center;
}

.navbar_menu ul {
  list-style: none;
}

.navbar_menu ul li {
  display: inline;
}
.navbar_menu ul li a {
  padding:0 10px 0 10px;
}
.navbar_menu ul li a:hover{
  background-color:#c9c;
}

【讨论】：

【解决方案2】：

令人惊讶。但是您会从每个列表项之间的行尾字符中获得额外的间距。将它们全部放在一行中，如下所示：

<ul>
   <li><a href="">link</a></li><li><a href="">link</a></li><li><a href="">link</a></li>
</ul>

【讨论】：

我认为margin: 0 auto;是什么弄乱了高度和宽度。