html - 如何防止无序列表中列表元素的边界重叠

Question

因此，我通过 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>

Answer 1

一个解决方案是:

#navigation_bar li {
    border: 1px solid black;
    border-left-width: 0;
}

#navigation_bar li:first-child {
    border-left-width: 1px;
}

现场演示: http://jsfiddle.net/mscpg/3/