帶有段落 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在列表中的其余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>