带有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 */
}

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>