使用CSS自定义列表项目项目符号

Question

是否可以改变<li>元素子弹的大小？

看看下面的代码:

li {
    list-style: square; // I want to change the size of this squared bullet. 
}

我似乎无法找到任何方法来实现这一目标.

Answer 1

我想你的意思是改变子弹的大小？我相信这与li标签的字体大小有关.因此,您可以炸掉LI的字体大小,然后将其缩小为包含在其中的元素.添加额外标记有点糟糕 - 但是类似于:

li {font-size:omgHuge;}
li span {font-size:mehNormal;}

或者,您可以为列表项目符号指定一个图像文件,该文件可以根据需要大小:

ul{
  list-style: square url("38specialPlusP.gif");
 }

请参阅:http://www.w3schools.com/css/css_list.asp

Answer 2

根据@dzimney的回答和类似@Crisman的答案(但不同):

答案很好,但有缩进问题(子弹出现在li范围内).可能你不想要这个.请参阅下面的简单示例列表(这是默认的HTML列表):

• Lorem ipsum dolor坐在amet,ei cum offendit partiendo iudicabit.在mei quaestio honestatis,duo dicit affert persecuti ei.Etiam nusquam cu his,nec alterum posidonium philosophia te.Nec an purto iudicabit,no vix quod clita expetendis.

• Quem suscipiantur no eos,sed impedit explicari ea,falli inermis comprehensam est in .Vide dicunt ancillae cum te,habeo delenit deserunt mei in.Tale sint ex his,ipsum essent appellantur et cum.

但是如果你使用上面提到的答案,列表将如下所示(忽略子弹的大小):

• Lorem ipsum dolor sit amet,ei cum offendit partiendo iudicabit.在mei quaestio honestatis,duo dicit affert persecuti ei.Etiam nusquam cu his,nec alterum posidonium philosophia te.Nec an purto iudicabit,no vix quod clita expetendis.

• Quem suscipiantur no eos,sed impedit explicari ea,falli inermis comprehensam est in .Vide dicunt ancillae cum te,habeo delenit deserunt mei in.Tale sint ex his,ipsum essent appellantur et cum.

所以我推荐这种解决问题的方法:

li {
    list-style-type: none;
    position: relative;    /* It is required for setting position to absolute in the next rule. */
}

li::before {
    content: '\2022';      /* Unicode for • character */
    position: absolute;
    left: -0.8em;          /* Adjust this value so that it appears where you want. */
    font-size: 1.1em;      /* Adjust this value so that it appears what size you want. */
}

<ul>
    <li>Lorem ipsum dolor sit amet, ei cum offendit partiendo iudicabit. At mei quaestio honestatis, duo dicit affert persecuti ei. Etiam nusquam cu his, nec alterum posidonium philosophia te. Nec an purto iudicabit, no vix quod clita expetendis.</li>
    <li>Quem suscipiantur no eos, sed impedit explicari ea, falli inermis comprehensam est in. Vide dicunt ancillae cum te, habeo delenit deserunt mei in. Tale sint ex his, ipsum essent appellantur et cum.</li>
</ul>

Answer 3

您可以将li其他元素的内容包装起来,例如a span.然后,给出li一个更大的font-size,并设置正常的font-size背面span:

http://jsfiddle.net/RZr2r/

li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

Answer 4

您可以使用 ::marker CSS 伪元素来设置列表的数字或项目符号的样式。目前，到 2022 年 1 月，Safari 支持仅限于颜色和字体大小。

例子：

::marker {
  color: red;
  font-size: 2rem
}

ul > li::marker {
  color: blue;
}

ol > li::marker {
  font-size: 1rem
}

<ul>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ul>
 
<ol>
  <li>Wake up</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

Answer 5

根据所需的IE支持级别,您还可以使用:before选择器并将项目符号样式设置为content属性.

li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

您可能必须查找所需子弹样式的HTML ASCII,并使用转换器来获取CSS Hex值.

Answer 6

另一种改变子弹大小的方法是：

1. 完全禁用子弹
2. 借助::before伪元素重新添加自定义项目符号。

例子：

ul {
  list-style-type: none;
}

li::before {
  display:          inline-block;
  vertical-align:   middle;
  width:            5px;
  height:           5px;
  background-color: #000000;
  margin-right:     8px;
  content:          ' '
}

<ul>
  <li>first element</li>
  <li>second element</li>
</ul>

无需更改标记