Question

所以我有一个水平导航栏，我通过浮动无序列表的列表元素创建。它工作正常，但在两个列表元素满足两个边框形式的地方，以创建所需厚度的两倍。有办法解决这个问题吗？

尝试了一个解决方案： 我可以指定单个列表元素的左右边框属性，但这种方法看起来不太可扩展，但它可以工作。

您可以在此处查看我的代码和演示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/

Answer 2

有许多可能的解决方案。例如：

<ul id="navigation_bar">
        <li class="first">Projection</li>
        <li>Real-Time</li>
        <li>Cleanup</li>
    </ul>

和css：

            #navigation_bar {
                overflow: hidden;
                list-style-type: none;
                width: 100%;
            }
                #navigation_bar li {
                    text-align: center;
                    float: left;
                    width: 32%;
                    border-style: solid;
                    border-width: 1px;
                    border-color: black;
                    border-left:none;
}
#navigation_bar li.first {    
    border-left:solid 1px black;
}

Demo

此外 - here带有负余量

Answer 3

我认为使用display: inline-block代替浮动所有内容会更好。例如：

 #navigation_bar {
        overflow: hidden;
        list-style-type: none;
        width: 100%;
    }
    #navigation_bar li {
        text-align: center;
        display: inline-block;
        width: 30%; /* Slightly smaller width to fix the borders */
        border-style: solid;
        border-width: 1px;
        border-color: black;
    }

Answer 4

我认为最简单的方法是给列表中的最后一项ID或类，然后给它自己的边框

在行动on jsbin

中查看

Answer 5

您始终可以在div中包含列表项，然后将列表项的边框指定为所需查看大小的一半。然后你可以将它们包含在左右边框中的div，它们是所需大小的一半。

Answer 6

IMO，最简单的方法是将此添加到您的＆＃34; #navigation_bar li＆＃34;定义，如果需要，只需在ul上添加一个1px的margin-right来补偿：

margin-right: -1px;

如果是桌子，您可以方便地选择边框折叠属性。

如何防止无序列表中列表元素的重叠边框

6 个答案: