内联UL - x每行项目数;每行之间需要1px边框/分隔符

Question

我正在创建一个带有内联无序列表的菜单栏，上面和下面有一个1px分隔符。如果只有一行线，这很好。

一旦进入2（或更多）行链接，我想在第一行（第二行）之下有第三个分隔符，但我不能在我的生活中解决它。

我唯一想到的是使用带有线条和透明空间的背景图像，然后在推到多条线条时将其平铺，但必须有更好的方法！

非常感谢任何帮助！

编辑：

所有图片都嵌入其中。这大致是现在看起来如果只有一行链接。 2.这是我分成多行时得到的。好像你需要它......这就是我想要达到的目标;在li的每一行之后获得额外的分隔符：

对于这些链接感到抱歉..我目前不允许嵌入图片。所有图像合二为一;不能发布超过2个超链接..

Answer 1

这是你如何做到的。使用inline-block会使事情变得有点挑战，因为LI和UL边界的链接需要相同的宽度才能排列。

<div class="menu">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>

CSS：

.menu ul, .menu li {
    margin:0;
    padding:0;
    font-size: 0;
    list-style:none
}

.menu li {
    display:inline-block;
    border-bottom:1px solid #0000cc;
}

.menu a {
    display:block;
    padding:5px;
    margin:0;
    text-decoration:none;
    min-width:63px;
    font-size:16px;    
}    

.menu ul {
    width:220px;
    margin-top:5px;
    padding-bottom:1px;
    border-top:1px solid #002080;
    border-bottom:1px solid #002080;
}