在<li>标签内的<p>标签,基于计数器重置强制计数器强制不需要的新行

Question

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

但是,当<p>标签内部有<li>标签时,会强制文本显示在实际计数器后面的一行上.有没有办法在仍然使用<p>标记时阻止此行为？也就是说,如何在下面的最小工作示例中将"Life is bad" 文本<p>与其计数器显示在同一行,同时将文本保留在HTML标记中的标记内？

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

演示

现在上面的选择器将使所有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 */
}