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

概述列表项可能包含几个段落,图像等.它们都应该保留在项目编号的右侧. #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 ite 列表项可能包含几个段落,图像等.它们都应该保留在项目编号的右侧.

#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 >Example<br/>Image</div>    </li>  </ol>  <p>Some more text</p></div>

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

解决方法 您可以在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>

总结

以上是内存溢出为你收集整理的html – 将列表项目编号与周围段落对齐全部内容，希望文章能够帮你解决html – 将列表项目编号与周围段落对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。