因此,我通过 float 无序列表的列表元素创建了一个水平导航栏。它工作正常,但在两个列表元素与两个边框相交的地方形成了所需厚度的两倍。有办法解决吗?
尝试的一种解决方案: 我可以指定单个列表元素的左右边框属性,但这种方法的可扩展性似乎不高,但它确实有效。
您可以在这里查看我的代码和演示 http://jsfiddle.net/mscpg/ 或检查下面的代码
CSS
#navigation_bar {
overflow: hidden;
list-style-type: none;
width: 100%;
}
#navigation_bar li {
text-align: center;
float: left;
width: 33%;
border-style: solid;
border-width: 1px;
border-color: black;
}
HTML
<ul id="navigation_bar">
<li>Projection</li>
<li>Real-Time</li>
<li>Cleanup</li>
</ul>
最佳答案
一个解决方案是:
#navigation_bar li {
border: 1px solid black;
border-left-width: 0;
}
#navigation_bar li:first-child {
border-left-width: 1px;
}
关于html - 如何防止无序列表中列表元素的边界重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12698093/