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元素等之间有一些空间。我不明白这个空间来自何处以及如何删除它？

你可以在小提琴中看到这个：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 中设置 font-size ，这样就可以这样了

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

希望这会对你有帮助......

Answer 2

只需添加float：left;

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

Answer 3

使用此css

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

Answer 4

将您的CSS更新为

.top_nav li {
    float: left;
    margin-right: 1px;
}

http://jsfiddle.net/Xye3L/2/

Answer 5

只需在 CSS 中使用display: block和float: left：

.top_nav li {
    display: block;
    float:left;
}

而不是：

.top_nav li {
    display: inline-block;
}

Answer 6

删除所有LI之间的所有间距，标签。

Answer 7

试试这段代码：

.top_nav li {
    display: inline-block;
    margin-right: -3px;
}

设置li元素之间的距离。您可以根据需要进行调整。

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

7 个答案: