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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.