2

我有带有 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/

4

7 回答 7

2

解决这个问题的最好方法是在.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;
}

也许这个链接会帮助你，它有更多的细节

争夺内联块元素之间的空间 CSS 技巧

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

所以会是这样

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

希望对你有帮助 ...

于 2013-06-26T12:59:50.087 回答
1

使用这个 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; 
}
于 2013-06-26T13:05:49.750 回答
1

只需添加 float: left;

.top_nav li {
 float: left;
 height: 71px;
 border-left: 1px solid #dfdfdf;
 border-top: 1px solid #dfdfdf;
 border-bottom: 1px solid #dfdfdf;
}
于 2013-06-26T12:58:58.990 回答
0

删除所有 LI 之间的所有间距和制表符。

于 2013-06-26T12:57:40.443 回答
0

将您的 CSS 更新为

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

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

于 2013-06-26T12:55:55.113 回答
0

只需在您的CSSdisplay: block中使用and ：float: left

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

代替：

.top_nav li {
    display: inline-block;
}
于 2013-06-26T12:56:22.607 回答
0

试试这个代码：

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

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

于 2013-06-26T13:01:43.360 回答