检测水平ul内的换行符[重复]答案

【问题标题】：Detect line break within horizontal ul [duplicate]检测水平ul内的换行符[重复]
【发布时间】：2018-01-10 08:46:15
【问题描述】：

我有一个横向排列的无序列表。我想要每个元素之间的项目符号。 （网站是响应式的，所以我不知道换行符可能出现在哪里）。

我想知道是否有什么办法可以删除每个新行中的第一个项目符号。

这是我目前得到的。

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？

【问题讨论】：

嗯，我不确定没有 Javascript 是否可行。让我们看看其他答案...
找到一个解决方案可以很有趣，只使用 css 而不使用 Javascript。
单独使用 css 的唯一方法是使用媒体查询并知道哪个 nth-child 在各个断点处更改内容

标签： javascript jquery html css

【解决方案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规则。例如，您可以在移动视图的 分隔符 类中使用“display: none”。

PS：这样你就不需要列表项上的项目符号，所以你最好通过 CSS 隐藏它们。

【讨论】：