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

Question

页面布局:960 像素宽，居中。然而，导航栏是 100% 宽的，导航栏内的链接以 960px 为中心。导航栏的背景为#333333。我希望单词间隔 20px。当我将鼠标悬停在链接上时，我希望背景颜色突出显示左侧 10px 和右侧 10px 的文本，这样看起来不错。每当我似乎悬停时，它都会增加额外的间距。当我将它从 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;
}

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