LI 元素的文本分隔符

Posted 2023-04-13

【中文标题】LI 元素的文本分隔符

【英文标题】：Text Separators for LI Elements

【发布时间】：2011-09-11 05:42:19

【问题描述】：

我想在我的 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>

你怎么看？谢谢。

【问题讨论】：

你需要支持IE7吗？ caniuse.com/css-gencontent

Separators For Navigation的可能重复

【参考方案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: "/";

【讨论】：

我是唯一需要使用n+2 才能使其工作的人吗？

不，你不是，你是唯一一个测试过它的人。我现在正在改变它。

【参考方案2】：

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

li + li:before 
    content: " | ";

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

li:before 
  content: " | ";


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

【讨论】：

很好的例子。如果先前的元素被隐藏（例如在使用 Bootstrap hide-* 时），您是否知道如何做到这一点？

【参考方案3】：

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

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

或类似的东西。

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

【参考方案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;

【参考方案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 元素彼此相邻并给你一个边框。结果将类似于

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

【讨论】：

这并不是这家伙想要的。 / != |

注意到了，但是这个解决方案是跨浏览器兼容的，无需添加额外的 CSS 规则或黑客，只要你能克服结果分隔符有轻微角度变化的事实。