我正在尝试获取自定义的有序列表来处理段落和其他容器，但我无法使列表的行为与默认值相同。具体来说，我希望有一个自定义列表和分段内容，它们与枚举显示在同一行。另外，我正在寻找一种更改列表而不是段落的解决方案。该段落只是我不想更改的一些生成内容的示例。.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>
1 回答
30秒到达战场
TA贡献1828条经验 获得超6个赞
您可以添加inline-block到p- 像这样：
.custom li > p {
display: inline-block;
margin: 2px; /* you can also adjust your margins/padding if you wish */
}
更新
根据评论（和更新的问题），如果您有多个段落，那么<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>
- 1 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消