带有计数器的</p> <li>标签内的<p>标签基于反复位强制不需要的新行</li>

Question

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

但是，当<p>标记内有<li>标记时，会强制文本显示在实际计数器后面的一行上。有没有办法在使用<p>标记时阻止此行为？也就是说，我怎样才能制作文字＆＃34;生活不好＆＃34;以下最小工作示例与其计数器显示在同一行，同时将文本保留在HTML标记中的<p>标记中？

这是最小的工作示例（以及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

现在，上面的选择器会将p内的所有ol li元素设为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)") ";
}