我意识到可以使用CSS属性指定自定义图形作为替换项目符号：
list-style-image
然后给它一个URL。
但是，就我而言，我只想使用'+'符号。我不想为此创建图形然后指向它。我宁愿只是指示无序列表使用加号作为项目符号。
可以这样做还是我被迫先把它作为图形？
答案 0 :(得分：153)
这是一个迟到的答案，但我刚刚遇到了这个问题......要在任何换行上获得缩进正确，请尝试这样：
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
答案 1 :(得分：69)
以下内容来自Taming Lists：
有时您可能有一个列表，但您不想要任何项目符号，或者您想使用其他一些字符代替项目符号。同样，CSS提供了一个简单的解决方案。只需添加list-style：none;对你的规则强迫LIs用悬挂缩进显示。规则看起来像这样：
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }填充或边距需要设置为零，另一个设置为1em。根据您选择的“项目符号”，您可能需要修改此值。负文本缩进导致第一行向左移动该数量，从而创建悬挂缩进。
HTML将包含我们的标准UL，但包含您要使用的任何字符或HTML实体，以代替列表项内容之前的项目符号。在我们的例子中，我们将使用»，正确的双角度引用：»。
»第1项 »第2项 »第3项 »第4项 »第5项我们将制作 更长一点，以便
它将包装
答案 2 :(得分：30)
这么多解决方案。
但我仍然认为还有改进的余地。
<强>优点：
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>
答案 3 :(得分：23)
这是W3C解决方案。目前，这至少在Firefox中起作用。
ul { list-style-type: ""; }
/* Sets the marker to a emoji character */
答案 4 :(得分：18)
这是迄今为止我发现的最佳解决方案。它运行良好，它是跨浏览器（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;
}
重要的是将字符放在具有固定宽度的浮动块中，以便文本保持对齐，如果它太长而无法放在一行上。 1.2em 是您想要角色的宽度，根据您的需要进行更改。
答案 5 :(得分：10)
您可以使用:before伪选择器在列表项前面插入内容。您可以在http://www.quirksmode.org/css/beforeafter.html找到关于Quirksmode的示例。我使用它在blockquotes周围插入巨大的引号......
HTH。
答案 6 :(得分：9)
我的解决方案使用定位来自动排列包裹的线条。因此，您不必担心在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>
答案 7 :(得分：8)
Font-awesome提供了一个开箱即用的绝佳解决方案：
<link href="https://maxcdn.bootstrapcdn.com/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>
答案 8 :(得分：7)
建议对<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;
}
答案 9 :(得分：4)
.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>
答案 10 :(得分：1)
我更喜欢使用负边距，为您提供更多控制
ul {
margin-left: 0;
padding-left: 20px;
list-style: none;
}
li:before {
content: "*";
display: inline;
float: left;
margin-left: -18px;
}
答案 11 :(得分：1)
有趣的是，我不知道任何发布的解决方案是否足够好，因为它们依赖于所使用的字符是1em宽的事实，这不需要如此（可能除了John Magnolia的答案，但是它使用了漂浮物可能会使事情变得复杂化）。这是我的尝试：
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>
这具有以下优势（超过其他解决方案）：
text-align: center;即可。例如，您可以尝试
color: red;
text-align: right;
padding-right: 5px;
box-sizing: border-box;
或者如果您不喜欢使用边框，只需从宽度中减去填充（5px）（即宽度：此示例中为25px）。有很多选择。享受。
答案 12 :(得分：0)
短划线样式：
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}
答案 13 :(得分：0)
.single-before {
list-style: "?";
list-style-position: outside!important;
}
<ul class="single-before">
<li> is to manifest perfection already in man.</li>
<li> is to bring out the best facets of our students personalities.</li>
</ul>
答案 14 :(得分：0)
我知道这很晚了，但是我今天遇到了这个问题，发现这仅适用于内联CSS（您也可以在.css文件中编写）：
style='list-style-type: "*";margin-left: -0.6em;padding-left: 0.6em;'
或
ul li {list-style-type: "*";margin-left: -0.6em;padding-left: 0.6em;}
<ul class="listStyleNone">
<li>
Sign Up for Free: Sign up and create an account. Make sure you select what you want to do - Find pet care service, Offer pet care service or both.
</li>
<li style='list-style-type: "*";margin-left: -0.6em;padding-left: 0.6em;'>
Don't have time to contact sitters? Post a job ad and let dog walkers get in touch with you!
</li>
</ul>
答案 15 :(得分：0)
您可以使用 ::marker 伪元素。当您需要为每个列表项使用不同的字符实体时，这很有用。
ul li::marker {
content: " "; /* Your symbol here */
}
ul li:nth-child(1)::marker {
content: "\26BD ";
}
ul li:nth-child(2)::marker {
content: "\26C5 ";
}
ul li:nth-child(3)::marker {
content: "\26F3 ";
}
ul li::marker {
font-size: 20px;
}
ul li {
margin: 15px 0;
font-family: sans-serif;
background: #BADA55;
color: black;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 5px;
}<ul>
<li>France Vs Croatia</li>
<li>Cloudy with sunshine</li>
<li>Golf session ahead</li>
</ul>答案 16 :(得分：0)
在 Bootstrap 中，您可以使用 class list-unstyled。然后，您可以使用例如 HTML emoji 或其他东西代替项目符号：
<ul class="text-dark display-4 list-unstyled">
<li>🌞 Phasellus iaculis neque</li>
<li>🌻 Purus sodales ultricies</li>
<li>🌞 Vestibulum laoreet porttitor sem</li>
<li>🌻 Ac tristique libero volutpat at</li>
</ul>
答案 17 :(得分：-2)
试试这个
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>