html - 是否可以防止 li :before from forcing a list item paragraph to the next line (JSFiddle inside)?

Question

我使用 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 出现在同一行？

Answer 1

由于段落是 block 元素，它们将另起一行……也就是说，除非您将元素 float 在它前面。由此产生了一些其他样式问题，但我相信您可以解决这些问题(我在我的示例中补偿了一些问题):

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

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