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 -->

结果将如下：

首页|关于我们| SUPPORT

现在，您可以无限期地扩展，永远不必担心订单，更改链接或首次输入。这一切都是自动化的，效果很好！

Answer 2

尝试这个，寻求者：

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

这只会影响adjecent li元素

找到here

Answer 3

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

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

OR：

.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

Answer 4

我认为你最好的镜头是border-left属性，除了第一个li之外，它被分配给每个first（你必须给第一个属性{{1}并明确删除该边框。）

即使您以编程方式生成<li>，分配first类也应该很容易。

Answer 5

更简单的解决方案是添加#navigation ul li~li { border-left: 1px solid #857D7A; }

Answer 6

.last { border-right: none

.last { border-right: none !important; }

Answer 7

我这样做是因为佩卡说。在每个<li>上添加内联样式：

style="border-right: solid 1px #555; border-left: solid 1px #111;"

在适当的时候先起飞和最后一次。

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

7 个答案: