1

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

一旦进入 2 行（或更多）链接，我希望在第一行（第二行之上）下方有第三个分隔符，但我终生无法解决。

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

任何帮助将不胜感激！

编辑：

所有图像嵌入一张。1.如果只有一行链接，大致是这样的。2. 这就是当它分成多行时我得到的。3.好像你需要它..这就是我想要实现的；在每行 li 之后获得额外的分隔符：

抱歉链接..我目前不允许嵌入图像。所有图像合二为一；不能发布超过2个超链接..

4

1 回答 1

0

这是你如何做到的。使用 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;
}
于 2013-01-23T15:59:55.097 回答