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

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>

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

Answer 1

查看list-style-positionproperty

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

Answer 2

您可以在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>

您也可以使用 CSS 计数器并通过伪元素添加列表编号。

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