Aligning list item numbers with surrounding paragraphs

Question

List items can contain a couple of paragraphs, images, etc. They must remain to the right of the item number.

#page {
  width: 200px;
}

li {
  margin: 1em 0;
}
ol {
  padding: 0;
}

<div id="page">
  <p>Some text</p>
  <ol>
    <li>A list item</li>
    <li>A multiline list item another line</li>
    <li>
      <p>A list item containing blocks such as example images:</p>
      <div style="width:128px;height:48px;background:#CCC">Example<br/>Image</div>
    </li>
  </ol>
  <p>Some more text</p>
</div>

Run codeHide result

Ideally, I prefer to store list tags rather than using a table or another set of positioned common blocks.

Answer 1

You can simply add a left padding to the item ol.

#page {
  width: 200px;
}
ol {
  padding: 0 0 0 1em;
}
ol li {
  margin: 1em 0;
}

<div id="page">
  <p>Some text</p>
  <ol>
    <li>A list item</li>
    <li>A multiline list item another line</li>
  </ol>
  <p>Some more text</p>
</div>

Run codeHide result

You can also use a CSS counter and add a list number using a pseudo-element.

#page {
  width: 200px;
}
ol {
  list-style: none;
  padding: 0;
}
ol li {
  margin: 1em 0;
  counter-increment: number;
  display: flex;
}
ol li:before {
  content: counter(number)".";
  margin-right: 5px;
}

<div id="page">
  <p>Some text</p>
  <ol>
    <li>A list item</li>
    <li>A multiline list item another line</li>
  </ol>
  <p>Some more text</p>
</div>

Run codeHide result

Answer 2

check list-style-position property

#page {
  width: 200px;
}
li {
  margin: 1em 0;
  /* this is what you want ↓ */
  list-style-position: inside;
}
ol {
  padding: 0;
}

<div id="page">
  <p>Some text</p>
  <ol>
    <li>A list item</li>
    <li>A multiline list item another line</li>
  </ol>
  <p>Some more text</p>
</div>

Run codeHide result