是否可以防止 li:before 将列表项段落强制到下一行（JSFiddle inside）？

Posted 2023-02-23

【中文标题】是否可以防止 li:before 将列表项段落强制到下一行（JSFiddle inside）？

【英文标题】：Is it possible to prevent li:before from forcing a list item paragraph to the next line (JSFiddle inside)?

【发布时间】：2015-01-16 00:17:38

【问题描述】：

我使用 FontAwesome 图标作为我的无序列表的自定义项目符号，但使用 li:before 似乎会改变列表项中段落标签的行为。

查看此JSFiddle，了解两个不同列表中的段落标记。一个有 li:before，一个没有。

html：

<ul class="before">
    <li>list item 1</li>
    <li>
        <p>list item 2 (paragraph)</p>
        <p>list item 2 (sub paragraph)</p>
    </li>
    <li>list item 3</li>
</ul>
<br />
<br />
<ul>
    <li>list item 1</li>
    <li>
        <p>list item 2 (paragraph)</p>
        <p>list item 2 (sub paragraph)</p>
    </li>
    <li>list item 3</li>
</ul>

CSS：

.before li:before 
    content:"B4";
    color: red;
    margin-right: 8px;

如何让列表项段落与 li:before 出现在同一行？

【参考方案1】：

由于段落是块元素，它们将开始一个新行...也就是说，除非您将项目浮动在它前面。还有一些其他的样式问题由此产生，但我相信您可以解决这些问题（我在示例中对一些问题进行了补偿）：

http://jsfiddle.net/ryanwheale/ko2efv7b/2/

.before li:before 
    content:"B4";
    color: red;
    margin-right: 8px;
    float: left;

【讨论】：

这依赖于用户知道:before 内容的宽度来正确重置填充，对吧？

并非如此 - 由于某种原因，浮动伪元素导致项目符号出现在列表中 (see here)。可能有更好的解决方案，但我不会免费找到它；）

Touché - 如果是我的项目，我会使用我发布的代码 ;) 无论如何，这有点没有意义，因为 OP 实际上是 替换 子弹。 Here's an example with different sized "bullets"

list-style-image，或者这里的答案：***.com/questions/5306640/…

【参考方案2】：

您可能应该接受 Ryan 的回答，但如果您想要一个更骇人听闻的答案，不需要您知道之前内容的宽度，这是我的尝试：

Fiddle with hiding dots

CSS

.before li 
    list-style: dot outside none;

.before li:before 
    content:"B40M8UW0T?";
    color: red;
    margin-right: 8px;
    float: left;
    list-style: dot outside none;
    display: list-item;
    position: relative;
    z-index: 2;
    background-color: white;

Fiddle with a green background illustrating the hack

所以，基本上我们是在告诉浏览器将 :before 伪显示为列表项本身，然后通过匹配底层元素的背景颜色来隐藏实际列表项的结果项目符号点.在小提琴中，我留下了ul 绿色来说明这种情况。

这不是一个完美的解决方案，但如果不付出巨大的努力，就不会有完美的解决方案。

干杯。