使用CSS自定义列表项

Is it possible to change the size of an <li> element's bullet?

是否有可能改变

元素子弹的大小?

元素子弹的大小吗?

Take a look at the code below:

看看下面的代码:

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

I can't seem to find any way to achieve that.

我似乎找不到任何方法去实现它。

10 个解决方案

#1

You mean altering the size of the bullet, I assume? I believe this is tied to the font-size of the li tag. Thus, you can blow up the font-size for the LI, then reduce it for an element contained inside. Kind of sucks to add the extra markup - but something like:

你是说改变子弹的大小，我猜?我相信这和li标签的字体大小有关。因此，您可以放大LI的字体大小，然后将其减少为包含在内部的元素。添加额外的标记是一种很糟糕的做法，但是有点像:

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

Alternately, you can specify an image file for your list bullets, that could be as big as you want:

或者，您可以为您的列表子弹指定一个图像文件，它可以是您想要的大小:

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

See: http://www.w3schools.com/css/css_list.asp

参见:http://www.w3schools.com/css/css_list.asp

#2

You can wrap the contents of the li in another element such as a span. Then, give the li a larger font-size, and set a normal font-size back on the span:

您可以将li的内容封装到另一个元素中，例如span。然后，给li一个更大的字体大小，在跨度上设置一个正常的字体大小:

http://jsfiddle.net/RZr2r/

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>

#3

Depending on the level of IE support needed, you could also use the :before selector with the bullet style set as the content property.

根据需要的IE支持级别，您还可以使用:before选择器与bullet样式集作为内容属性。

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

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

You may have to look up the HTML ASCII for the bullet style you want and use a converter for CSS Hex value.

您可能需要查找HTML ASCII，以获得您想要的子弹样式，并使用一个转换器用于CSS十六进制值。

#4

Based on @dzimney answer and similar to @Crisman answer (but different):

基于@dzimney的回答，类似于@Crisman的回答(但不同):

That answer is good but has indention problem (the bullets appears inside of li scope). Probably you don't want this. See simple example list below (this is a default HTML list):

这个答案很好，但是有缩进问题(子弹出现在li scope里面)。也许你不想要这个。参见下面的简单示例列表(这是一个默认的HTML列表):

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

  洛伦·伊普桑·杜洛埃坐飞机，我和他的对手一起去。4 .在我面前，诚实是最重要的。这是一种哲学哲学。我想说的是，没有人能做得到。

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

  当你遇到障碍时，你会发现它是完全的。在这里，你可以看到它的影子，也可以看到它的影子。这个故事符合他的，也符合他的观点。

But if you use the mentioned answer the list will be like below (ignoring the size of the bullets):

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

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

洛伦·伊普桑·杜洛埃坐飞机，我和进攻方一起。4 .在我面前，诚实是最重要的。这是一种哲学哲学。我想说的是，没有人能做得到。

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

如果你不懂，你就会明白。在这里，你可以看到它的影子，也可以看到它的影子。这个故事符合他的，也符合他的观点。

---

So I recommend this approach that resolves the issue:

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

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

li::before {
    content: '\2022';      /* The 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>

#5

Another way of changing the size of the bullets would be:

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

1. Disabling the bullets altogether
2. 完全禁用子弹
3. Re-adding the custom bullets with the help of ::before pseudo-element.
4. 在伪元素::before之前的帮助下重新添加自定义子弹。

Example:

例子:

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>

No markup changes needed

不需要标记的变化

#6

I assume you mean the size of the bullet at the start of each list item. If that's the case, you can use an image instead of it:

我假设你是指每个列表项目开始时子弹的大小。如果是这样的话，你可以用一个图片来代替:

list-style-image:url('bigger.gif');
list-style-type:none;

If you meant the actual size of the li element, then you can change that as normal with width and height.

如果您指的是li元素的实际大小，那么您可以根据宽度和高度将其更改为正常大小。

#7

<ul>
    <li id="bigger"></li>
    <li></li>
    <li></li>
  </ul>

  <style>
     #bigger .li {height:##px; width:##px;}
  </style>

#8

You have to use an image to change the actual size or form of the bullet itself:

你必须使用图像来改变子弹本身的大小或形状:

You can use a background image with appropriate padding to nudge content so it doesn't overlap:

您可以使用带有适当填充的背景图像来推动内容，这样就不会重叠:

list-style-image:url(bigger.gif);

or

或

background-image: url(images/bullet.gif);

#9

li {
    list-style-type: disc;
    font-size: 0.8em;
}

li * {
    font-size: initial;
}

#10

In case you do not want to wrap the content in your <li>s with <span>s, you can also use :before like this:

如果您不想用s将内容封装在

s中，也可以使用:

年代中,也可以使用:

ul {
  list-style: none;
  }
li {
  position: relative;
  padding-left: 15px;
  line-height: 16px;
}
li:before {
  content: '\2022';
  line-height: 16px; /*match the li line-height for vertical centered bullets*/
  position: absolute;
  left: 0;
}
li.huge:before {
  font-size: 30px;
}

li.small:before {
  font-size: 10px;
}

Adjust your font sizes on the :before to whatever you would like.

调整你的字体大小在:之前，以任何你想要。

<ul>
  <li class="huge">huge bullet</li>
  <li class="small">smaller bullet</li>
  <li class="huge">multi line item with custom<br/> sized bullet</li>
  <li>normal bullet</li>
</ul>