html - 将列表项编号与周围的段落对齐

Question

列表项可能包含几个段落、图像等。它们都应位于元素编号的右侧。

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

理想情况下，我更愿意保留列表标签，而不是使用表格或其他一组定位的通用 block 。

Answer 1

查看 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>