Custom ordered list with paragraphs CSS

user_1891461 0
Viewed 511

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>
paragraph css html
1 Answers

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

user_6004860
Related