Question

我在CSS中发现了一篇关于list-style-type property的文章，但没有列出＆amp; middot; （·）作为选项，而不是默认的disc或＆amp; bullet; （•）。有没有办法用HTML或CSS做到这一点？

Answer 1

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. */
}

警告：这不是真正的列表样式。因此，当你有包装列表时，它看起来很有趣。这可以通过几个单位的负文本缩进来缓解，以使其更像列表样式。

另一种实施方式：

li:before {
    content: '\b7\a0';
    position:absolute;
    right:100%
}
li {
    list-style:none;
    position:relative;
}

这个版本似乎效果更好。我经常使用:before和:after添加额外的东西，比如边框，但如果你要添加一个子弹我想象情况并非如此。虽然这是备用建议，但它可能是首选建议。

Answer 2

是的！您可以使用before伪类在每个项目之前插入字符。

.DotList li:before
{
    content: "·";
}

Here是jsFiddle的一个例子。

Answer 3

list-style-type未选择要使用的字符，它会选择要使用的抽象标记。请注意标准状态：

值'none'不指定标记，否则有三种类型的标记：字形，编号系统和字母系统。

用圆盘，圆圈和正方形指定字形。它们的精确渲染取决于用户代理。

要更好地控制标记，您必须使用list-style-image设置图像或使用:before伪元素和content属性，将list-style-type设置为“无” ”。 IE 7及更早版本不支持:before和content property，因此您必须使用list-style-image来支持IE 7，或者只是让IE 7使用其他标记。您可以使用条件注释来定位IE 7及更早版本。

Answer 4

您可以在LI

中使用背景图像

一个可能的例子
http://css.maxdesign.com.au/listamatic/vertical05.htm

Answer 5

list-style-type中定义的li:before { content: '\[utf-8 hex code for character]'; position: absolute; right: 100%; } li { position: relative; }可用选项数量有限。

您可以使用：

盘
圆
方
小数
十进制前导零
较低罗马
上层罗马
下希
下拉丁
上拉丁
亚美尼亚
格鲁吉亚
下-α
上-α
无

如果您想要自定义内容，请使用CSS2 spec

如果您为支持生成内容的浏览器设置样式，则可以使用：

{{1}}

Answer 6

而不是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>

使用·而不是子弹为<ul> </ul>

6 个答案: