带有段落 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

正如@Temani Afif 提到的，您可以将inline-block 添加到p - 像这样：

.custom li > p {
  display: inline-block;
  margin: 2px; /* you can also adjust your margins/padding if you wish */
}

更新

根据 cmets（和更新的问题），如果您在同一个 <li> 上有多个段落，那么您可以为列表中的第一个 p 和列表中的其余 ps 添加不同的样式.大致如下：

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

见下面的演示代码..

更新了基于 cmets 的演示代码

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