<li> 标签内的 <p> 标签，带有基于 counter-reset 的计数器强制不需要的新行

Question

CSS counter-reset 属性允许自动编号 HTML 元素（例如 here）。除了在链接中演示的用途之外，当<li> 元素并非都出现在同一个<ol> 标记内时，此属性还可用于在网页上制作连续的有序列表。

但是，当<li> 标记内有<p> 标记时，这会强制文本出现在实际计数器之后的一行上。有什么方法可以防止这种行为同时仍然使用<p> 标签？也就是说，如何使以下最小工作示例中的文本“Life is bad”与其计数器显示在同一行同时将文本保留在 HTML 标记中的 <p> 标记内 em>？

这是最小的工作示例（在 JSFiddle 上）：

HTML：

<div id="test">
    <ol>
        <li class="continuous-list">Life is good</li>
        <li class="continuous-list">
            <p>Life is bad</p>
        </li>
    </ol>
    <ol>
        <li class="continuous-list">Life is good</li>
        <li class="continuous-list">Life is good</li>
    </ol>
</div>

CSS：

#test {
    counter-reset: continuous-counter;
}
li.continuous-list {
    list-style-type: none;
    counter-increment: continuous-counter;
}
li.continuous-list:before {
    content:"(" counter(continuous-counter)") ";
}

Answer 1

因为p是块级元素，所以需要内联

ol li p {
    display: inline;
}

Demo

现在，上面的选择器会将ol li 中的所有p 元素设为display: inline，因此当您使用id 时，您可以通过使用使您的选择器独一无二

div#test ol li p {
    display: inline; /* Or you can use inline-block as well if you are 
                        looking to work with margins and paddings, inline-block 
                        will be handy */
}

Answer 2

将float:left 添加到before

即

li.continuous-list:before {
    float: left;
    content:"(" counter(continuous-counter)") ";
}