CSS问题：如何在一行文字前添加黑色实心小圆点？

开发运维 2023-11-16 大猫手机阅读

一、需求分析，问题描述

1、需求

详情页有许多文字，在每一行文字前都添加一个黑色实心小圆点，并且要保持与黑色标题左对齐。

2、问题

有哪些方式添加黑色实心小圆点？各有什么优缺点？
怎样让黑色实心小圆点与后面的文字保持垂直居中对齐？

二、解决问题，答案速览

1、如果公司有UI切图

如果有切图，这是最高效、最灵活的实现方式，只需一个img元素扔上去，然后让图标和后面的文字垂直水平居中即可。

这种方式不仅可以添加黑色实心小圆点，还可以加任意形状的图标，不过前提是要有人给你切图。

<ul>

<li>
      <img src="https://www.51cto.com/article/images/PromotionIcon.png">
      The
  </li>

<li>
     <img src="https://www.51cto.com/article/images/PromotionIcon.png">
     The
  </li>
</ul>

.xingIcon{
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 10px;
}
.va-middle{
  vertical-align: middle;
}

2、如果公司没有UI切图

如果没有人给你切图，那只能老老实实自己画了。这里最高效的当然是使用ul元素的list-style-type属性，加上此属性，轻轻松松添加黑色小圆点，还能整个空心的。注意要往左边缩进1rem距离。

<ul>

<li>App Functions</li>

<ul>

<li>App Functions</li>

<li>App Functions</li>
  </ul>

<li>App Functions</li>
<ul></ul></ul>

.feature-list {
  font-weight: 400;
  color: @black-color;
  font-size: 16px;
  line-height: 30px;
  margin-left: 1rem;
  list-style-type: disc;
  ul{
    margin-left: 1rem;
    list-style-type: circle;
  }
}