水平 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;
}

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

最终结果应该是这样的：

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

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

我已经尝试过不同的方法 - 我尝试设置list-style-image属性，但图像没有显示出来。我还尝试将分隔符设置为背景，它基本上可以工作，但是它会在第一个项目前面添加分隔符。

- Michael L

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 | ABOUT US | SUPPORT

现在您可以无限地扩展，而不必担心顺序、更改链接或第一条目录。所有都是自动化的，并且效果非常好！

- David Cahill

---

您真是太棒了。这个方法对我非常有效。由于它全部使用CSS完成，如果需要进行更改，将非常简单。 - ArtisanSamosa

你考虑过:not(:first-child):before吗？ - automaticAllDramatic

请注意，最后两条规则可以合并为一条：#navigation li + li:before { content: " | "; } - rinogo

Answer 2

试试这个，寻求者：

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

这将仅影响相邻的li元素

在这里找到链接

- vladkras

---

这真是太棒了！ - frazras

Answer 3

这也可以通过CSS伪类完成。支持范围不如上面的答案广，但它是纯CSS的 =)

.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

- Campbeln

Answer 4

我认为最好的方法是将border-left属性分配给每个li，除了第一个（您必须为第一个指定一个名为first的类，并明确删除该边框）。

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

- Pekka

---

甚至可以放心地依赖于CSS 2.1选择器，并使用ul > li:first-child来定位第一个元素，而无需添加任何额外的标记。 - Wex

只是想指出他要求的是图像分隔符而不是侧边框，但本质上是相同的想法（将背景图像赋给<li>）。 - Wex

Answer 5

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

- newbie

Answer 6

.last { border-right: none

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

- Scott

Answer 7

这对我来说很好用：

注意，我正在使用 SCSS 语法，而不是 BEM/OCSS。

#navigation{
  li{
     &:after{
        content: '|'; // use content for box-sizing
        text-indent: -999999px; // Hide the content
        display: block;
        float: right; // Position
        width: 1px;
        height: 100%; // The 100% of parent (li)
        background: black; // The color
        margin: {
          left: 5px;
          right: 5px;
        }
      }

      &:last-child{

        &:after{
          content: none;
        }

      }
  }
}

- Satu

Answer 8

我按照Pekka的说法去做。在每个<li>上放置内联样式：

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

根据需要去掉开头和结尾。

- Martin