使用 CSS 自定义列表项项目符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6457059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customize list item bullets using CSS
提问by Alex
Is it possible to change the size of an <li>element's bullet?
是否可以更改<li>元素项目符号的大小？
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.
我似乎找不到任何方法来实现这一目标。
回答by adc
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");
}
回答by Mir-Ismaili
Based on @dzimney answerand similar to @Crisman answer(but different)
基于@dzimney 的回答并类似于@Crisman 的回答（但不同）
That answer is good but has indentionproblem (bullets appear inside of liscope). Probably you don't want this. See simple example list below (this is a default HTML list):
这个答案很好，但有缩进问题（项目符号出现在liscope 内）。可能你不想要这个。请参阅下面的简单示例列表（这是默认的 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.
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 坐 amet, ei cum offendit partiendo iudicabit。在 mei quaestiohonestatis，duo dicit affert persecuti ei。Etiam nusquam cu his, nec alterum posidonium philosophia te。Nec an purto iudicabit，没有 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。
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.
? Lorem ipsum dolor 坐 amet, ei cum offendit partiendo iudicabit。在 mei quaestiohonestatis，duo dicit affert persecuti ei。Etiam nusquam cu his, nec alterum posidonium philosophia te。Nec an purto iudicabit，没有 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.
? 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's needed for setting position to absolute in the next rule. */
}
li::before {
content: '■';
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>回答by thirtydot
You can wrap the contents of the liin another element such as a span. Then, give the lia larger font-size, and set a normal font-sizeback on the span:
您可以将 的内容包装li在另一个元素中，例如 a span。然后，给li一个更大的font-size，并在 上设置一个正常的font-size背span：
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>
回答by dzimney
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 选择器，将项目符号样式设置为内容属性。
li {
list-style-type: none;
font-size: small;
}
li:before {
content: '22';
font-size: x-large;
}
You may have to look up the HTML ASCIIfor the bullet style you want and use a converterfor CSS Hex value.
您可能需要查找所需项目符号样式的HTML ASCII并使用CSS 十六进制值的转换器。
回答by Alexander Lomia
Another way of changing the size of the bullets would be:
另一种改变子弹大小的方法是：
- Disabling the bullets altogether
- Re-adding the custom bullets with the help of
::beforepseudo-element.
- 完全禁用子弹
- 借助
::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
无需更改标记
回答by James Allardice
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 lielement, then you can change that as normal with widthand height.
如果您的意思是li元素的实际大小，那么您可以像往常一样使用width和更改它height。
回答by MattF
<ul>
<li id="bigger"></li>
<li></li>
<li></li>
</ul>
<style>
#bigger .li {height:##px; width:##px;}
</style>
回答by Dan
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);
回答by Havok
If you wrap your <li>content in a <span>or other tag, you may change the font size of the <li>, which will change the size of the bullet, then reset the content of the <li>to its original size. You may use emunits to resize the <li>bullet proportionally.
如果您将<li>内容包装在 a<span>或其他标签中，您可以更改 的字体大小<li>，这将更改项目符号的大小，然后将 的内容重置<li>为其原始大小。您可以使用em单位<li>按比例调整项目符号的大小。
For example:
例如：
<ul>
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
Then CSS:
然后CSS：
li {
list-style-type: disc;
font-size: 0.8em;
}
li * {
font-size: initial;
}
A more complex example:
一个更复杂的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Item Bullet Size</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.disc li {
list-style-type: disc;
font-size: 1.5em;
}
ul.square li {
list-style-type: square;
font-size: 0.8em;
}
li * {
font-size: initial;
}
</style>
</head>
<body>
<h1>First</h1>
<ul class="disc">
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
<h1>Second</h1>
<ul class="square">
<li><span>First item</span></li>
<li><span>Second item</span></li>
</ul>
</body>
</html>
Results in:
结果是：
回答by Crisman
In case you do not want to wrap the content in your <li>s with <span>s, you can also use :beforelike this:
如果您不想<li>用<span>s将s 中的内容包装起来，您也可以:before这样使用：
ul {
list-style: none;
}
li {
position: relative;
padding-left: 15px;
line-height: 16px;
}
li:before {
content: '22';
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 :beforeto whatever you would like.
将 上的字体大小调整为您:before想要的任何大小。
<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>
