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