Align list item numbers with surrounding paragraphs

Question

The list items may contain a couple of paragraphs, images, etc. They should all stay 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>

Ideally I would prefer to keep the list tags rather than use a table or other set of positioned generic blocks.

Answer 1

check out 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>