所以我有一个通过浮动无序列表的列表元素创建的水平导航栏。它工作正常,但在两个列表元素遇到两个边框的地方形成双倍的所需厚度。有没有办法解决这个问题?
尝试的一种解决方案: 我可以指定单个列表元素的左右边框属性,但这种方法似乎不是很有可扩展性,但它确实有效。
你可以在这里查看我的代码和演示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>