带段落 CSS 的自定义有序列表

Question

我正在尝试获取自定义的有序列表来处理段落和其他容器，但我无法使列表的行为与默认值相同。

具体来说，我希望有一个自定义列表和分段内容，它们与枚举显示在同一行。另外，我正在寻找一种更改列表而不是段落的解决方案。该段落只是我不想更改的一些生成内容的示例。

.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>

Answer 1

您可以添加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>