Question

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

Answer 1

解决方案drafted by W3C是设置自定义list-style-type属性。

这似乎适用于Firefox，但不适用于Chrome。因此，除非您只关心Firefox，否则不建议使用它。

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

amp-what.com是不同符号的良好资源，还包括符号的CSS代码，例如CSS中的bullot符号为\2022，CSS中的middot符号为\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>

Answer 2

你可以用两种方式做到这一点

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>

复制开始前

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用css减少列表样式项目符号大小？

3 个答案: