Html 使用 · 而不是 <ul> 的子弹
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8176623/
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
Use · instead of bullet for <ul>
提问by steveo225
I found an article on the list-style-type propertyin CSS, but it doesn't list the · (·) as an option, as opposed to the default discor • (•). Is there a way to do this with HTML or CSS?
我在 CSS 中找到了一篇关于list-style-type 属性的文章，但它没有列出 · (·) 作为一个选项，而不是默认disc或 • (•)。有没有办法用 HTML 或 CSS 做到这一点？
回答by Levi Morrison
CSS (works in any browser supporting :beforeand content:):
CSS（适用于任何支持:before和 的浏览器content:）：
li:before {
content: '\b7\a0'; /* \b7 is a middot, \a0 is a space */
}
li {
list-style:none;
text-indent:-.5em; /* helps make it look more like it's a bullet. */
}
Caution:It is not a real list style. Therefore, when you have wrapped lists, it will look funny. This can perhaps be mitigated by a negative text-indent of a few units to get it to function more like a list-style.
注意：这不是真正的列表样式。因此，当您包装好列表时，它看起来会很有趣。这也许可以通过几个单位的负文本缩进来减轻，使其更像列表样式。
Another implementation:
另一种实现：
li:before {
content: '\b7\a0';
position:absolute;
right:100%
}
li {
list-style:none;
position:relative;
}
This version seems to work better. I often use :beforeand :afterto add extra things like borders, but if you are adding a bullet I imagine that that is not the case. Even though this is the alternate suggestion, it is probably the preferred one.
这个版本似乎更好用。我经常使用:before和:after添加额外的东西，比如边框，但如果你添加一个项目符号，我想情况并非如此。尽管这是备选建议，但它可能是首选建议。
回答by Maxpm
回答by outis
list-style-typedoesn't select what character to use, it selects an abstract marker to use. Note the standard states:
list-style-type不选择要使用的字符，而是选择要使用的抽象标记。请注意标准状态：
The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems.
Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent.
值 'none' 指定没有标记，否则有三种类型的标记：字形、编号系统和字母系统。
字形用圆盘、圆形和方形指定。它们的准确呈现取决于用户代理。
For more control over the marker, you must either set an image using list-style-imageor use the :beforepseudo element and contentproperty, setting the list-style-typeto 'none'. :beforeand the contentpropertyaren't supported in IE 7 and earlier, so you must either use list-style-imageto support IE 7 or simply let IE 7 use a different marker. You can use conditional comments to target IE 7 and earlier.
为了更好地控制标记，您必须使用list-style-image或使用:before伪元素和content属性设置图像，将 设置list-style-type为“无”。:before并且该content属性在 IE 7 及更早版本中不受支持，因此您必须使用list-style-image来支持 IE 7 或简单地让 IE 7 使用不同的标记。您可以使用条件注释来定位 IE 7 及更早版本。
回答by Brian Hoover
You can use an background-image in LI
您可以在 LI 中使用背景图像
One possible example
http://css.maxdesign.com.au/listamatic/vertical05.htm
一个可能的例子
http://css.maxdesign.com.au/listamatic/vertical05.htm
回答by zzzzBov
There are a limited number of available options for list-style-typewhich are defined in the CSS2 spec.
CSS2 规范list-style-type中定义了有限数量的可用选项。
You can use:
您可以使用：
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-latin
- upper-latin
- armenian
- georgian
- lower-alpha
- upper-alpha
- none
- 光盘
- 圆圈
- 正方形
- 十进制
- 十进制前导零
- 低罗马
- 上罗马
- 下希腊语
- 低拉丁
- 上拉丁语
- 亚美尼亚语
- 格鲁吉亚人
- 低阿尔法
- 上阿尔法
- 没有任何
If you'd like something custom, use the list-style-imageproperty
如果您想要自定义的东西，请使用该list-style-image属性
If you're styling for browsers that support generated content, you can use:
如果您要为支持生成内容的浏览器设置样式，则可以使用：
li:before {
content: '\[utf-8 hex code for character]';
position: absolute;
right: 100%;
}
li {
position: relative;
}
回答by M.S.
Instead of li:before, which affects all li's (in menu, tabs, accordion) on page, I have used this:
而不是li:before, 影响页面上的所有 li（在菜单、标签、手风琴中），我使用了这个：
ul {
list-style: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAMAAAAYuxziAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF////cmpmZmZm+MGYqNP/Zmt/06N6j7j/ImXnGgAAABpJREFUeNpiYAABZkZWFgY2JiZ2CAsVAAQYAAPiACwnaqqBAAAAAElFTkSuQmCC');
}
<ul>
<li>This is my middot</li>
</ul>