Question

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

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

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

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

Answer 2

这似乎对我有用。当你提到“间隔”时。你通常指的是填充或边距。这些是要学习的重要概念 - 有很多很棒的教程。我在列表项内的链接的左侧和右侧添加了填充。因为您还没有为每个列表项指定宽度，所以链接确定了大小并为每边添加了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;
}

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

2 个答案: