链接之间的Navbar分隔符

Question

所以我试图让我的导航栏列表项在每一侧都有边框，但我希望它们仍然像这样连接： http://prntscr.com/4wa4q4

当我尝试向两侧添加边框时，它们是间隔开的，没有边距，每个列表项上的2个边框在一起。我怎么能像照片那样做呢？

Answer 1

http://jsfiddle.net/9Leecphh/

<强> HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

<强> CSS：

ul{
    list-style: none;
}
ul li:first-child{
    border-left: 1px solid gray;
}
ul li{
    border-right: 1px solid gray;
    display: table-cell;
    padding: 5px 20px;
    color: #FFF;
    background: #000;
    margin: 0;
}

Answer 2

只需在li上添加border-right，在li上添加border-left：first child。然后你就可以在屏幕截图中看到它。