带段落的自定义排序列表 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 */
}

更新

根据评论（和更新的问题），如果您在同一个 <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;
}

~~查看下面的演示代码..~~

根据评论更新了演示代码

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

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

Custom ordered list with paragraphs CSS

html

css

paragraph