我意识到可以使用 CSS 属性将自定义图形指定为替换项目符号字符：
list-style-image
然后给它一个 URL。
但是，就我而言，我只想使用“+”符号。我不想为此创建一个图形然后指向它。我宁愿只是指示无序列表使用加号作为项目符号。
可以这样做还是我必须先将其制作成图形？
问问题
319047 次
18 回答
187
这是一个较晚的答案，但我刚刚遇到这个......要在任何换行的行上正确缩进，请尝试以下方式：
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
于 2012-08-31T14:02:56.490 回答
87
以下内容来自Taming Lists：
有时您可能有一个列表，但您不想要任何项目符号，或者您想使用其他字符代替项目符号。同样，CSS 提供了一个简单的解决方案。只需添加 list-style: none; 遵守您的规则并强制 LI 显示悬挂缩进。该规则将如下所示：
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }填充或边距需要设置为零，另一个设置为 1em。根据您选择的“项目符号”，您可能需要修改此值。负文本缩进导致第一行向左移动该量，创建悬挂缩进。
HTML 将包含我们的标准 UL，但使用您想要使用的任何字符或 HTML 实体来代替列表项内容之前的项目符号。在我们的例子中，我们将使用»，右双角引号：»。
» 第 1
项 » 第 2
项 » 第 3
项 » 第 4 项
» 第 5
项
于 2011-10-08T18:22:15.213 回答
59
这么多解决方案。
但我仍然认为还有改进的余地。
优点：
- 非常紧凑的代码
- 适用于任何字体大小
（不包含绝对像素值） - 完美对齐行
（第一行和后续行之间没有轻微偏移）
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>于 2016-09-15T10:46:50.403 回答
49
这是 W3C 的解决方案。适用于 Firefox、Chrome 和 Edge。
ul { list-style-type: ""; }
/* Sets the marker to a emoji character */
http://dev.w3.org/csswg/css-lists/#marker-content
ul { list-style-type: " "; }<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>于 2013-07-24T07:58:53.933 回答
21
这是迄今为止我找到的最佳解决方案。它工作得很好，而且它是跨浏览器（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是您想要的角色宽度，根据需要进行更改。
于 2014-02-17T15:06:26.400 回答
13
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>于 2015-12-04T02:24:06.943 回答
11
我的解决方案使用定位来让包裹线自动正确排列。所以你不必担心在 li:before 上设置 padding-right。
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>于 2015-01-06T10:11:24.363 回答
11
您可以使用:before伪选择器在列表项的前面插入内容。您可以在http://www.quirksmode.org/css/beforeafter.html找到有关 Quirksmode 的示例。我用它在块引号周围插入大引号......
HTH。
于 2011-10-08T18:19:36.060 回答
9
建议对 的样式进行限定，<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;
}
于 2013-10-06T21:22:06.317 回答
5
.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>于 2013-12-31T08:19:31.353 回答
5
您可以使用::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>于 2021-02-13T10:08:07.007 回答
5
.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>于 2019-11-18T12:43:40.703 回答
4
Em dash 样式：
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}
于 2019-01-30T08:42:27.157 回答
2
有趣的是，我认为任何已发布的解决方案都不够好，因为它们依赖于所使用的字符是 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>这具有以下优点（相对于其他解决方案）：
- 正如您在示例中看到的那样，它不依赖于符号的宽度。我使用了两个字符来表明它甚至可以使用宽子弹。如果您在其他解决方案中尝试此操作，则会导致文本未对齐（实际上，在更高的缩放比例下，它甚至可以用 * 符号显示）。
- 它使您可以完全控制子弹使用的空间。您可以用任何东西（甚至 1em 等）替换 30px。只是不要忘记在所有三个地方都进行更改。
- 如果让您完全控制子弹的定位。只需将其替换
text-align: center;为您喜欢的任何内容即可。例如，您可以尝试color: red; text-align: right; padding-right: 5px; box-sizing: border-box;，或者如果您不喜欢使用边框框，只需从宽度中减去填充（5 像素）（即本例中的宽度：25 像素）。有很多选择。 - 它不使用浮点数，因此可以包含在任何地方。
享受。
于 2016-03-27T07:42:06.867 回答
2
我更喜欢使用负边距，给你更多的控制权
ul {
margin-left: 0;
padding-left: 20px;
list-style: none;
}
li:before {
content: "*";
display: inline;
float: left;
margin-left: -18px;
}
于 2015-08-04T09:14:30.860 回答
1
首先，感谢@Jpsy，因为我的回答是基于此。
我已扩展该答案以支持 Google Material Icons 包作为自定义图标。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>
ul {
position: relative;
list-style: none;
margin-left: 0;
padding-left: 1.2em;
}
ul li:before {
font-family: 'Material Icons';
content: "double_arrow"; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
position: absolute;
left: 0;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
于 2021-08-12T17:52:31.480 回答
1
在 Bootstrap 中，您可以使用class list-unstyled。然后，您可以使用例如HTML 表情符号或其他东西来代替子弹：
<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>
于 2021-04-22T12:16:20.463 回答
-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>于 2016-02-22T14:23:17.417 回答