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 + 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

来做

您需要将“第一”类添加到集合中的第一个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元素彼此相邻并为您提供边框。结果看起来像

客户支持|送货信息|尺寸图|隐私政策|联系

Answer 6

为什么不在包含li的每个文本与/之间添加li并将css添加到该li以提供间距？

<ul id="footer_menu">
    <li>Customer Support</li>
    <li class='spacer'>/</li>
    <li>Shipping Info</li>
    <li class='spacer'>/</li>
    <li>Size Charts</li>
    <li class='spacer'>/</li>
    <li>Privacy Policy</li>
    <li class='spacer'>/</li>
    <li>Contact</li>
</ul>
<style>
.spacer{width:20px;}
</style>

在<LI>中添加非<ul>元素不是有效标记。或者使用其他类型的html元素，例如<p>或<divs>

LI元素的文本分隔符

6 个答案: