我正在尝试获取自定义的有序列表以与段落和其他容器一起使用,但是我无法使列表的行为与默认行为相同。具体来说,我希望有一个自定义的列表和段落内容与枚举显示在同一行。另外,我正在寻找一种可以更改列表而不是段落的解决方案。该段只是一些我不想更改的生成内容的示例。
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.solution {
list-style-type: none;
counter-reset: elementcounter;
}
.solution li>p {
display: inline-block;
}
.solution li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
<ol>
<li><p>Places nicely on the same line.</p></li>
<li><p>Places nicely on the same line.</p> <p>Places nicely on the same line.</p></li>
</ol>
<!-- Original problem
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places nicely on the second line.</p></li>
</ol>
-->
<ol class="solution">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>
正如@Temani Afif所述,您可以将inline-block
添加到p
-像这样:
.custom li > p {
display: inline-block;
margin: 2px; /* you can also adjust your margins/padding if you wish */
}
UPDATE
基于注释(和更新的问题),如果您在同一<li>
上有多个段落,则可以为列表中的第一个p
和列表中的其余p
添加不同的样式。类似于以下内容:
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
请参见下面的演示代码。
基于注释的更新演示代码
.custom {
list-style-type: none;
counter-reset: elementcounter;
}
.custom li:before {
content: counter(elementcounter) ". ";
counter-increment: elementcounter;
}
.custom li > p {
margin: 2px;
}
.custom li > p + p {
display: block;
margin: 0 1.1em;
list-style-type: none;
}
.custom li > p:first-of-type {
display: inline-block;
}
<ol>
<li>
<p>Places nicely on the same line.</p>
</li>
<li>
<p>Places nicely on the same line.</p>
</li>
</ol>
<ol class="custom">
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
<li><p>Places poorly on the second line.</p></li>
<li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>