水平UL菜单上的垂直分隔线

Question

我正在尝试创建一个水平导航栏(没有下拉菜单,只是一个水平列表),但我找不到在菜单项之间添加垂直分隔线的最佳方法.

实际的HTML如下:

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>

目前的CSS如下:

.menu li {
display: inline;
margin-left: 25px;
padding-left: 25px;
}

在每个菜单项之间我想要一个小图像作为垂直分隔符,除了我不想在第一个项目之前显示分隔符并且我不希望在第二个项目之后显示分隔符.

最终结果应如下所示:

第1项| 第2项| 第3项| 第4项| 第5项

只需用实际图像替换管道即可.

我尝试了不同的方法 - 我尝试过设置list-style-image属性,但图像没有显示出来.我也尝试将分隔符设置为背景,实际上或多或少都有效,除了它使第一个项目在它前面有一个分隔符.

Answer 1

相当简单,没有任何"必须指定第一个元素".CSS比大多数人想象的更强大(例如,first-child:before太棒了!).但这是迄今为止最干净,最恰当的方式,至少在我看来是这样.

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li:not(:first-child):before {
    content: " | ";
}

现在只需在HTML中使用一个简单的无序列表,它就会为您填充它.HTML应该如下所示:

<div id="navigation">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Support</a></li>
    </ul>
</div><!-- navigation -->

结果将是这样的:

HOME | 关于我们| 支持

现在,您可以无限期地扩展,永远不必担心订单,更改链接或您的第一个条目.它全部自动化,效果很好!

Answer 2

尝试这个,寻求者:

li+li { border-left: 1px solid #000000 }

这只会影响adjecent li元素

在这里找到

Answer 3

这也可以通过CSS:伪类来完成.支持不是很宽,上面的答案给你相同的结果,但它是纯CSS-y =)

.ULHMenu li { border-left: solid 2px black; }
.ULHMenu li:first-child { border: 0px; }

要么:

.ULHMenu li { border-right: solid 2px black; }
.ULHMenu li:last-child { border: 0px; }

请参阅:http://www.quirksmode.org/css/firstchild.html
或者:http://www.w3schools.com/cssref/sel_firstchild.asp