<ul>中的<li>元素的自定义项目符号是常规字符，而不是图像

我意识到可以使用CSS属性指定一个自定义graphics作为替代项目符号字符：

list-style-image 

然后给它一个URL。

但是，就我而言，我只是想使用“+”符号。 我不想为此创build一个graphics，然后指向它。 我宁愿只是指示无序列表使用加号作为项目符号。

可以这样做，还是我不得不把它做成一个graphics？

Answer 1

以下是从驯服列表引用：

有些时候你有一个列表，但你不想要任何子弹，或者你想用一些其他的字符来代替子弹。 同样，CSS提供了一个简单的解决scheme。 只需添加列表样式：无; 遵守你的规则，并强制LIs显示垂直缩进。 规则将如下所示：

 ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; } 

填充或边距需要设置为零，另一个设置为1em。 根据您select的“项目符号”，您可能需要修改此值。 负面的文本缩进会导致第一行被移动到左侧，创build一个挂起的缩进。

HTML将包含我们的标准UL，但是您要使用任何字符或HTML实体来代替列表项内容之前的项目符号。 在我们的情况下，我们将使用»，正确的双angular度报价：»。

»第1项
»第2项
»项目3
»项目4
»项目5我们将做
有点长，所以
它会包装

Answer 2

这是一个迟到的答案，但我只是遇到了这个…为了得到正确的缩放在任何包装行，尝试这种方式：

 ul { list-style: none; margin-left: 0; padding-left: 0; } li { padding-left: 1em; text-indent: -1em; } li:before { content: "+"; padding-right: 5px; } 

Answer 3

这是W3C的解决scheme。 目前，这至less在Firefox中起作用。

 ul { list-style-type: "🔔"; } /* Sets the marker to a 🔔 emoji character */ 

http://dev.w3.org/csswg/css-lists/#marker-content

Answer 4

这是迄今为止我find的最好的解决scheme。 它工作得很好，它是跨浏览器（IE 8 +）。

 ul { list-style: none; margin-left: 0; padding-left: 1.2em; text-indent: -1.2em; } li:before { content: "►"; display: block; float: left; width: 1.2em; color: #ff0000; } 

重要的是将字符放在具有固定宽度的浮动块中，以便如果文本太长而不能放在一行上，则文本保持alignment状态。 1.2em是你想要的字符的宽度，根据你的需要改变它。

Answer 5

您可以使用:before伪select器在列表项前插入内容。 你可以在http://www.quirksmode.org/css/beforeafter.htmlfind一个关于Quirksmode的例子。; 我用这个在blockquotes周围插入巨大的引号

HTH。

Answer 6

我的解决scheme使用定位来自动排列正确的包装线。 所以你不必担心在li上设置填充。

 ul { margin-left: 0; padding-left: 0; list-style-type: none; } ul li { position: relative; margin-left: 1em; } ul li:before { position: absolute; left: -1em; content: "+"; } 

 <ul> <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 4</li> <li>Item 5</li> </ul> 

Answer 7

build议限定<li>的样式，以免影响<ol>列表项目。 所以：

 ul { list-style: none; margin-left: 0; padding-left: 0; } ul li { padding-left: 1em; text-indent: -1em; } ul li:before { content: "+"; padding-right: 5px; } 

Answer 8

这么多解决scheme。
但我仍然认为还有改进的空间。

优点：

• 非常紧凑的代码
• 适用于任何字体大小
  （不包含绝对像素值）
• 完美地排列行
  （在第一行和后面的行之间没有轻微的转换）

 ul { position: relative; list-style: none; margin-left: 0; padding-left: 1.2em; } ul li:before { content: "+"; position: absolute; left: 0; } 

 <ul> <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li> <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li> </ul> 

Answer 9

Font-awesome提供了一个很好的解决scheme：

 <link href="font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <ul class='fa-ul'> <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li> <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li> </ul> 

Answer 10

 .list-dash li, .list-bullet li { position: relative; list-style-type: none; /* disc circle(hollow) square none */ text-indent: -2em; } .list-dash li:before { content: '— '; /* em dash */ } .list-bullet li:before { content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */ } 

 <ul class="list-dash"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 

Answer 11

我更喜欢使用负利润率，给你更多的控制权

 ul { margin-left: 0; padding-left: 20px; list-style: none; } li:before { content: "*"; display: inline; float: left; margin-left: -18px; } 

Answer 12

有趣的是，我没有任何发布的解决scheme是足够好的，因为他们依赖于使用的字符是1em宽，这不需要是这样的事实（也许除了约翰木兰的答案，然而使用浮动可以另一种方式使事情复杂化）。 这是我的尝试：

 ul { list-style-type: none; margin-left: 0; padding-left: 30px; /* change 30px to anything */ text-indent: -30px; } ul li:before { content: "xy"; display: inline-block; width: 30px; text-indent: 0; text-align: center; /* change this for different bullet position */ } 

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li> <li>Item 4</li> <li>Item 5</li> </ul> 

Answer 13

尝试这个

  ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } 

 <!DOCTYPE html> <html> <head> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>