LI 元素的文本分隔符

Question

我想在我的 li 元素之间添加一个正斜杠 ('/')，​​但我不确定在语义上执行此操作的最佳方法。现在，我只是在 li 标记中包含正斜杠并使用不间断空格添加间距，如下所示：

<ul id="footer_menu">
    <li>Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

你怎么看？谢谢。

Answer 1

您可以使用伪元素在元素之后包含文本，也可以使用 CSS3 选择器从最后一个元素中删除尾部斜杠。

#footer_menu li:after {
    content: "/";
}
#footer_menu li:last-child:after {
    content: "";
}

编辑：

使用更好的 CSS3 可以在一行中完成所有事情。

#footer_menu li:nth-child(n+2):before {
    content: "/";
}

编辑：编辑：

比这更容易。

#footer_menu li + li:before {
    content: "/";
}

Answer 2

这是我用 | 分隔的 LI 元素的解决方案（管道）：

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

邻接组合符（加号，+）在这种情况下非常方便。如果一个元素直接位于另一个指定元素之前，它允许您设置该元素的样式。由于第一个 li 之前没有另一个 li，因此它不会在其前面添加内容。这比打字少得多：

li:before {
  content: " | ";
}

li:first-child:before {
  content: "";
}

Answer 3

你可以把 li 的内容放在一个 span 中，然后使用 CSS：

ul#footer_menu li span:after { content:"/"; padding:0 5px; }

或类似的东西。

编辑 啊就像Kyle说的那样，但是last_child规则的添加更完整。

Answer 4

对于那些使用Sass的人，我为此写了一个mixin：

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

例子：

@include addSeparator('li', '|', 1em);

这会给你这个：

li+li:before {
  content: "|";
  padding: 0 1em;
}

Answer 5

如果你想做类似的事情 客户支持 / 运输信息 / 尺码表 / 隐私政策 / 联系方式 你可以用一些 CSS 来做到这一点

您需要将“first”类添加到集合中的第一个 li，如下所示

<ul id="footer_menu">
    <li class="first">Customer Support&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Shipping Info&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Size Charts&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Privacy Policy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</li>
    <li>Contact</li>
</ul>

然后是下面的 CSS

 #footer_menu ul {  
    float: left; 
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li {
    border-left: 2px solid #000000;
    float: left;
    padding: 0 10px;
}

#footer_menu li.first {
    border: none;
}

这会将所有 li 元素彼此相邻并给你一个边框。结果将类似于

客户支持 |运输信息 |尺码表 |隐私政策 |联系方式