html如何使ol元素排序的序号不和图片重叠

Question

使用ol元素标记顺序列表，为什么它的数字标记会和我的图片重叠

Answer 1

可以使用CSS样式来控制ol元素的排版和图像之间的间距

1. 在CSS中给ol元素设置padding-left属性来留出序号的空间：

ol {
  padding-left: 30px;
}

1. 给序号添加绝对定位（absolute），并设置其左边距（left）为负的padding-left值，例如：

ol li {
  position: relative;
  padding-left: 20px;
}

ol li::before {
  content: counter(item) ".";
  counter-increment: item;
  position: absolute;
  left: -20px;
}