使用css减少列表样式项目符号大小？ [复制]答案

【问题标题】：Decrease List style bullet size using css? [duplicate]使用css减少列表样式项目符号大小？ [复制]
【发布时间】：2018-06-23 19:53:40
【问题描述】：

我在不同的网站上进行了搜索，但找不到适合我的实际解决方案。我想减小 li 上的子弹图标的大小。但我不想在 li:: 之前使用该图像。有什么想法吗？

【问题讨论】：

虽然链接的问题是关于改变项目符号的颜色，但是描述的方法大多是通用的，可用于完全自定义列表项目符号。
另见this和this。

标签： html css

【解决方案1】：

如果你不想使用图片，你可以这样做。

li {
    list-style: none;
}

li:before {
    content:"· ";
    font-size:24px;
    vertical-align:middle;
    line-height:20px;
}

<ul>
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a></li>
<li><a>Item 5</a></li>
</ul>

【讨论】：

谢谢！我找到了实际的解决方案！干杯！

【解决方案2】：

A solution drafted by W3C 是设置一个自定义的list-style-type 属性。

这（尚）不适用于 Safari 或 iOS Safari。browser support of list-style-type: <string> 涵盖所有其他现代浏览器。

一种解决方案是为<ul> 设置自定义list-style-type，例如项目符号 • (&bull;) 小于默认列表项目符号。更小的中间点符号·（&middot;）。

amp-what.com 是不同符号的好资源，还包括符号的 CSS 代码，例如圆点符号• 在CSS 中为\2022，中点符号· 在CSS 中为\b7。

.small-bullets {
  list-style-type: '\2022';
  padding-left: 32px;
}

.small-bullets li {
  padding-left: 8px;
}

.even-smaller-bullets {
  list-style-type: '\b7';
  padding-left: 32px;
}

.even-smaller-bullets li {
  padding-left: 8px;
}

<ul class="default">
  <li>Hello</li>
  <li>World</li>
</ul>

<ul class="small-bullets">
  <li>Hello</li>
  <li>World</li>
</ul>

<ul class="even-smaller-bullets">
  <li>Hello</li>
  <li>World</li>
</ul>

【讨论】：

【解决方案3】：

你可以通过几种方式做到这一点

li{list-style-type:none;}
li:before{content:'\00b7'; font-size:20px; line-height:24px; vertical-align:middle;}

或者

li{list-style-type:none;}

并添加一个

<span>&#183;</span>

复制开始之前

【讨论】：