悬停时导航栏上的间距

Question

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

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

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

甚至还有评论，像这样：

<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>` 的：

随心所欲。

Answer 2

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

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

#nav ul li { 
    float: left;
}

悬停时导航栏上的间距

Spacing on nav bar when hover

html

css

spacing

nav

1 - 更改您的 HTML 格式：

2 - 负边距：

3 - 跳过结束标记：

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

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

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

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