【问题标题】：Spacing on nav bar when hover悬停时导航栏上的间距
【发布时间】：2015-10-30 06:39:23
【问题描述】：

我的导航栏有问题。当我将鼠标悬停在导航栏上的 About 或 Text 上时，它会在按钮左侧显示一个间距，我希望它的悬停颜色包含按钮的整个宽度。

HTML：

<div id="nav">
<ul> 
    <li class="home"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Text &#8964;</a>
      <ul class="submenu">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact &#8964;</a>
        <ul class="submenutwo">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li></li>
        </ul>
</ul>

CSS：

#nav { 
    background-color: #333;
    height: 52px;
    text-align: center;
    margin: 0 auto;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#nav li  {
    border-right: 1.8px solid #191919;
    height: auto;
    width: 156.5px;
    padding: 0;
    margin: 0;
}
.home  {
   border-left: 1.8px solid #191919;
}
#nav ul li { 
    display: inline-block;
}
#nav ul li:hover { 
    background-color: #444;
}
#nav ul li a, visted { 
    color: #ccc;
    display: block;
    padding: 15px;
    margin: 0;
    text-decoration: none;
}
#nav ul li a:hover { 
    color: #ccc;
    text-decoration: none;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul ul { 
    display: none;
    position: absolute;
    background-color: #444;
    border: 1px solid #333;
    border-top: 0;
    max-width: 169px;
}
#nav ul ul li {
    display: block;
}
#nav ul ul li a:visited {
    color: #ccc;
}
#nav ul ul li a:hover {
    color: #2980B9;
}

【问题讨论】：

您好 QTRLDN，欢迎来到 Stack Overflow。您无需在问题中添加“我找到了解决方案”。只需接受有助于解决您的问题的答案（绿色勾号）就足够了。

标签： html css nav spacing

【解决方案1】：

这是display:inline-block; 的一部分。如果你想让它们保持显示inline-block，有几种不同的解决方案(Read a css-Tricks article about it)：

1 - 更改您的 HTML 格式：

像这样更改<li> 的 html：

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

或者这个：

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

甚至使用 cmets，像这样：

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

或者，将所有的 li 放在一行中：

<ul><li>one</li><li>two</li><li>three</li></li>

它很乱，但很有效。

2 - 负边距：

非常简单：

li{
  display: inline-block;
  margin-right: -4px;
}

3 - 跳过结束标签：

这实际上在 HTML5 中非常好，li 不必有结束标记。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

4 - 将`<ul>`的字体大小设置为0：

ul {
  font-size: 0;
}
ul li {
  font-size: 16px;
}

5 - 或者，只是浮动 `<li>` 的：

随便你的船。

【讨论】：

发现这很有趣。我喜欢你的第一个选项，但在我个人看来，我认为简单地将列表元素放在一行中是最干净的：<li></li><li></li>。但无论如何，看到将元素保持在不同行的解决方法非常有趣。
@goatmeal 大声笑，感谢 css-tricks 的人：D 在阅读那篇文章之前，我只知道第一个和第二个选项
@JacobGray 谢谢#4 对我很有效！我的网页是 XHTML。

【解决方案2】：

您正在体验dreaded inline-block spacing issue。在您的小提琴中，如果您将所有 li 元素压缩到同一行，则悬停按预期工作。链接的文章概述了其他一些选项。

您也可以只 float 元素，这样可以解决问题。

#nav ul li { 
    float: left;
}