检测水平ul内的换行符

Question

我有一个无序列表，我已经横向排列了。我想要每个元素之间的子弹。 （该网站具有响应性，因此我不知道换行符可能出现在哪里）。

我想知道我是否可以做些什么来删除每一行中的第一颗子弹。

这是我到目前为止所得到的。

HTML：

<ul class="list-horizontal">
    <li>Inline list item #1</li>
    <li>Inline list item #2</li>
    <li>Inline list item #3</li>
    <li>Inline list item #4</li>
    <li>Inline list item #5</li>
</ul>

CSS：

.list-horizontal {
  text-align: center;
  font-size: 18px;
  padding: 0;
}

.list-horizontal li {
  display:inline-block;
}
.list-horizontal li:before {
  content: '\00a0\2022\00a0\00a0';
  color:#fff;
}
.list-horizontal li:first-child:before {
  content: '';
}

的jsfiddle

https://jsfiddle.net/tkcezggs/3/

但这只会消除第一个元素上的子弹。

这可能吗？使用javascript / jquery还是使用纯css？

Answer 1

尝试使用不同类别的其他列表项。例如：

<ul class="list-horizontal">
  <li>Inline list item #1</li>
    <li class='separator'>|</li>
  <li>Inline list item #2</li>
    <li class='separator'>|</li>
  <li>Inline list item #3</li>
    <li class='separator'>|</li>
  <li>Inline list item #4</li>
</ul>

然后，您可以在不同的视图上为此类声明一个css规则。例如，您可以使用＆＃39; display：none＆＃39;在移动视图的分隔符类上。

PS： 通过这种方式，您不需要列表项上的项目符号，因此您可以通过CSS隐藏它们。