Заказной список с параграфами CSS

Question

Я пытаюсь настроить настраиваемый упорядоченный список для работы с абзацами и другими контейнерами, но не могу заставить списки вести себя так же, как по умолчанию.

В частности, я хотел бы иметь настроенный список и содержание с параграфом, которое отображается в той же строке, что и перечисление. Также я ищу решение, которое меняет список, а не абзац. Абзац является лишь примером некоторого сгенерированного контента, который я не могу sh изменить.

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