4

是否可以|在 CSS 菜单中的每个列表元素中添加分隔符？

我试过content: "|"了，但没有用。

菜单如下所示：

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

结果是：

link link link link

而且我要：

link | link | link | link

我知道如何在 JavaScript 中做到这一点，但 CSS 会更好:) 菜单是自动生成的，我不想弄乱它。

4

6 回答 6

12

content您需要为、 like::before或使用伪元素::after：

li + li::before {
    content: "| ";
}

这是一个演示。

正如其他人所提到的，如果您正在寻找一条线，请根据需要使用border-(left|right)或padding使用margin。

于 2013-05-03T14:02:06.800 回答
5

我会用边界来做到这一点：

ul li a { border-left:1px solid #000; display:block; }

如果您不想在第一行添加一行，请添加：

ul li a:first-child { border:none; }
于 2013-05-03T14:01:43.040 回答
4

如果您发布了到目前为止您尝试过的内容，那将会很有帮助，但这应该有效：

li:not(:last-child):after {
  content:"|";
}

JSfiddle 上的工作示例。

于 2013-05-03T14:01:45.710 回答
1

使用边框：

li{border-left : 1px solid black;}
li:first-child{border : none;}
于 2013-05-03T14:01:44.610 回答
1

看看这个小提琴。

li
{
    float:left;
    list-style:none;
}
li:after
{
    content:"|";
    margin:0px 3px;
}

编辑

直到我发布后才注意到我的最后有一个额外的管道，并且其他人也在我之前写了正确的方式，所以没有摆脱我写的内容，这里是更新的。

li
{
    float:left;
    list-style:none;
}
li+li:before
{
    content:"|";
    margin:0px 3px;
}
于 2013-05-03T14:02:25.653 回答
0

像这样的东西

http://jsfiddle.net/SzvQq/

ul li a {
    display: block;
    padding: 0 15px;
    border-left: 1px solid #000;
}

ul li:first-child a {
    border-left: none;
}
于 2013-05-03T14:04:43.913 回答