html - css水平导航菜单创建了不必要的空白空间

Question

我有带有 ul/li 元素的水平导航菜单。

我需要在每个 li 元素周围有 1px 边框。当 li 元素彼此靠近时，我不需要 2px 边框。 这是我的代码:

HTML:

<ul class="top_nav">
    <li class="li_h"><a href="">Home</a>
    </li>
    <li class="li_au"><a href="">About Us</a>
    </li>
    <li class="li_c"><a href="">Categories</a>
    </li>
    <li class="li_cu"><a href="">Contact Us</a>
    </li>
    <li class="li_sl"><a href="">Successfull Letters</a>
    </li>
</ul>

CSS:

.top_nav {
    list-style-type: none;
    list-style-image: none;
}
.top_nav li {
    display: inline-block;
}
.top_nav li {
    height: 71px;
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
}
.li_h {
    width: 89px;
}
.li_au {
    width: 99px;
}
.li_c {
    width: 110px;
}
.li_cu {
    width: 106px;
}
.li_sl {
    width: 148px;
    border-right: 1px solid #dfdfdf;
}
.top_nav li a {
    text-decoration:none;
}
.top_nav li a:hover {
    color: purple;
}

这段代码根据我的需要创建边框。但是，正如您所看到的，第一个和第二个 li 元素、第二个和第三个 li 元素等之间有一些空格。我不明白这个空格从哪里来以及如何删除它？

你可以在 fiddle 中看到这个:http://jsfiddle.net/Xye3L/1/

Answer 1

解决这个问题的最好方法是在.top_nav中将font-size设置为0，这样就会像这样

.top_nav {
    list-style-type: none;
    list-style-image: none;
    font-size: 0;
}

您还应该在.top_nav li中设置字体大小，这样它就会像这样

.top_nav li {
    display: inline-block;
    height: 71px;
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdxwxwfdf;
    border-bottom: 1px solid #dfdfdf;
    font-size: 16px;
}

也许这个链接会对您有所帮助，它有更多详细信息

Fighting the Space Between Inline Block Elements | CSS-Tricks

---

还有另一种方法可以解决这个问题，您可以轻松地在.top_nav li中添加float: left

所以会是这样的

.top_nav li {
    float: left;
    height: 71px;
    border-left: 1px solid #dfdfdf;
    border-top: 1px solid #dfdxwxwfdf;
    border-bottom: 1px solid #dfdfdf;
}

希望这对您有帮助......