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

Question

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

＆＃13;

＆＃13;

#page {
  width: 200px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

结帐list-style-position property

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您只需向ol元素添加一些左边距即可。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;