水平UL菜单上的垂直分隔线 [英] Vertical dividers on horizontal UL menu

问题描述

我试图创建一个水平导航栏（没有下拉菜单，只是一个水平列表），但我无法找到在菜单项之间添加垂直分隔线的最佳方法。

I'm trying to create a horizontal navigation bar (no dropdown, just a horizontal list), but I'm having trouble finding the best way to add vertical dividers between the menu items.

实际的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;
}

在每个菜单项之间，我想要一个小图像作为垂直分隔符，我不想在第一个项目之前显示分隔符，我不想在第二个项目后显示分隔符。

Between each menu item I want a small image as a vertical divider, except that I don't want a divider shown before the first item and I don't want a divider shown after the second item.

最终结果应该是这样的：

The end result should look something like this:

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

Item 1 | Item 2 | Item 3 | Item 4 | Item 5

只需使用实际图片替换管道。

Just replacing the pipe with an actual image.

我尝试了不同的方式 - 我尝试设置 list-style-image 属性，但是图像没有显示。我还尝试设置分隔符作为一个背景，实际上或多或少工作除了它使第一个项目有一个分隔符在它的前面。

I've tried different ways - I've tried setting the list-style-image property, but the image didn't show up. I've also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.

推荐答案

非常简单，没有任何必须指定第一个元素。 CSS比大多数人想象的更强大（例如 first-child：before 是伟大的！）。但是这是迄今为止最清洁和最适当的方式，至少在我看来是这样。

Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper way to do this, at least in my opinion it is.

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

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

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

现在只需在HTML中使用一个简单的无序列表，您。 HTML应如下所示：

Now just use a simple unordered list in HTML and it'll populate it for you. HTML should look like this:

<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 |关于我们|支持

HOME | ABOUT US | SUPPORT

现在，您可以无限扩展，无需担心顺序，更改链接或第一个条目。这是所有的自动化和工作伟大！

Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It's all automated and works great!

这篇关于水平UL菜单上的垂直分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！