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

Question

I'm trying to get a customized ordered list to work with paragraphs and other containers but I can't get the lists to behave the same as the default.

Specifically, I would like to have a customized list and paragraphed content that appears on the same line as the enumeration. Also, I'm looking for a solution that changes the list and not the paragraph. The paragraph is just an example of some generated content that I do not wish to alter.

 .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

As @Temani Afif mentioned, you could add inline-block to the p - like this:

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

UPDATE

Based on the comments (and updated question) if you have multiple paragraphs on the same <li> then you can add different styles for the first p in the list and the rest of the p s on the list. Something along the lines of:

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

See demo code below..

Updated demo code based on comments

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