【全面|详解】调整元素li中圆点和文字的大小、样式、距离。

效果

我想把：

调整成:

 步骤 

步骤一

1、首先把 li 那个小圆点的大小调大一点 

这里要用到marker选择器。

li::marker {
  font-size: 30px;
}

步骤二

2、随后调整一下左边的点和右边的文字之间的间距

• 方法一：  在 li 的选择器里面加上这一行，但是对我来说没用。可能是因为我把它们的文字大小调整得不一样了？

  text-indent: -10px;

•  方法二：在 li 里面把文字重新用span包裹一下，然后为这个子span设置元素样式。【这里设置margin-left为负值就可以了。而且还可以单独用font-size调整文字的大小】

<li :style="color(scope.row.advertiseDiagnostics)">
//在li里面为文字重新设置一个span，然后调整文字的样式。
            <span class="li-content">{{ scope.row.advertiseDiagnostics }}</span>
   </li>
.li-content {
  color: black;
  margin-left: -20px;
  font-size:18px;
}

• 经过这一步，我的样式变成这样啦。

 步骤三

现在看起来已经很不错了，但是我发现这个小圆点和文字是不够对齐的。猜测是因为文字的大小不一样。因此：

3、将圆点和文字对齐

• 方法一：为每个子元素添加一个属性，但是我没效果欸，为啥我又没效果5555

vertical-align: middle;

• 方法二：我是用死办法解决的，就是不断地调整文字和点的大小，最终使其看起来统一，而且我还把方法一的middle改成了top。

li::marker {
  font-size: 25px;
  vertical-align: middle;
}
.li-content {
  color: black;
  margin-left: -20px;
  font-size:15px;
  vertical-align: top;
  margin-bottom:5px;
}

最终效果：

 附加

我还想实现一下，在下面加入其他的信息。我成功了！！！只要再用一个div把整个li包起来就可以啦！！

<div>
  <li :style="color(scope.row.advertiseDiagnostics.info)">
    <span class="li-content">{{ scope.row.advertiseDiagnostics.info}}</span>
  </li>
  <div class="additionalInfo"> <span>{{ scope.row.advertiseDiagnostics.additionalInfo1}}</span>
    <el-divider direction="vertical"></el-divider>
    <span><span>{{ scope.row.advertiseDiagnostics.additionalInfo2}}</span></span>
  </div>
</div>




li::marker {
  font-size: 25px;
  vertical-align: middle;
}
.li-content {
  color: black;
  margin-left: -20px;
  font-size: 15px;
  vertical-align: top;
  margin-bottom: 5px;
}
.advertise-list-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.additionalInfo {
  color: #909399;
  margin-left: 15px;
  font-size: 7px;
}