[分享]css列表图标和文字重合

 如何实现CSS列表图标和文字的重合效果？在设计网站的时候，有时候我们需要对一些内容进行分类展示，使用列表是一个不错的选择。而在列表中加入图标，更能让列表更加清晰易懂。但是，如果想要图标和文字重合，该...

 如何实现CSS列表图标和文字的重合效果？
在设计网站的时候，有时候我们需要对一些内容进行分类展示，使用列表是一个不错的选择。而在列表中加入图标，更能让列表更加清晰易懂。但是，如果想要图标和文字重合，该怎么做呢？
下面是一个基本的列表样式：

ul {
  list-style: none;
  padding: 0;
}

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

li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
} 

在这个基础上，我们可以通过一些CSS技巧来实现图标和文字重合的效果。
1.使用position属性
在上面的代码中，我们给li元素加入了position：relative属性，然后给li:before元素加入了position：absolute属性。这样，li:before元素的position就是相对于li元素的位置来计算。通过设置left和top属性，我们就能够将图标放到对应的位置。同时，我们可以通过调整top的值，来让图标和文字尽可能地重合。
2.使用line-height属性
除了position属性，我们还可以使用line-height属性来实现图标和文字重合的效果。线高是文本行中的高度，包括文本行本身的高度以及行间距。通过设置li元素的line-height等于它的高度，我们可以使图标垂直居中，从而实现图标和文字的重合效果。

li {
  padding-left: 20px;
  position: relative;
  line-height: 20px;
}
li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
} 

在这段代码中，我们给li元素的line-height属性设置为20像素，然后通过transform属性对li:before元素进行垂直居中。通过设置transform属性，我们可以将图标向上或向下移动一定的距离，使其与文字的位置相对应。
总结
通过上述两种方法，我们可以轻松地实现CSS列表图标和文字重合的效果。它们各有优点，根据具体的设计需求选择适合的方法即可。