Html <ul> 中 <li> 元素的自定义项目符号符号是常规字符，而不是图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7698764/
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
Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
提问by idStar
I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:
我意识到可以使用 CSS 属性将自定义图形指定为替换项目符号字符：
list-style-image
And then giving it a URL.
然后给它一个 URL。
However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.
但是，就我而言，我只想使用“+”符号。我不想为此创建一个图形然后指向它。我宁愿只是指示无序列表使用加号作为项目符号。
Can this be done or am I forced to make it a graphic first?
这可以完成还是我必须先将其制作成图形？
采纳答案by TJ WealthEngine API Evangelist
The following is quoted from Taming Lists:
以下引自《驯服清单》：
There may be times when you have a list, but you don't want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:
ul { list-style: none; margin-left: 0; padding-left: 1em; text-indent: -1em; }Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ?.
? Item 1
? Item 2
? Item 3
? Item 4
? Item 5 we'll make
a bit longer so that
it will wrap
有时您可能有一个列表，但您不想要任何项目符号，或者您想使用其他字符代替项目符号。同样，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 项，我们将做
的更长一点，以便
它可以包裹
回答by Mike T
This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:
这是一个迟到的答案，但我刚刚遇到了这个......要在任何换行的行上正确缩进，请尝试以下方法：
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding-left: 1em;
text-indent: -1em;
}
li:before {
content: "+";
padding-right: 5px;
}
回答by Jpsy
So many solutions.
But I still think there is room for improvement.
这么多解决方案。
但我仍然认为还有改进的余地。
Advantages:
好处：
- very compact code
- works with any font size
(no absolute pixel values contained) - aligns rows perfectly
(no slight shift between first line and following lines)
- 非常紧凑的代码
- 适用于任何字体大小
（不包含绝对像素值） - 完美对齐行
（第一行和后续行之间没有轻微的偏移）
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>回答by PHPst
This is the W3C solution. Works in Firefox and Chrome.
这是 W3C 解决方案。适用于 Firefox 和 Chrome。
ul { list-style-type: ""; }
/* Sets the marker to a emoji character */
http://dev.w3.org/csswg/css-lists/#marker-content
http://dev.w3.org/csswg/css-lists/#marker-content
ul { list-style-type: " "; } <ul><li>item</li></ul>回答by NicolasBernier
Here is the best solution I've found so far. It works great and it's cross-browser (IE 8+).
这是我迄今为止找到的最佳解决方案。它运行良好，并且是跨浏览器（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;
}
The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line. 1.2emis the width you want for your character, change it for your needs.
重要的是将字符放在一个具有固定宽度的浮动块中，这样如果文本太长而无法放在一行中，则文本保持对齐。 1.2em是你想要的角色宽度，根据你的需要改变它。
回答by user648519
My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the li:before.
我的解决方案使用定位来自动正确排列包装线。所以你不必担心在 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>回答by Tieson T.
You can use the :beforepseudo-selector to insert content in front of the list item. You can find an example on Quirksmode, at http://www.quirksmode.org/css/beforeafter.html. I use this to insert giant quotes around blockquotes...
您可以使用:before伪选择器在列表项前插入内容。您可以在http://www.quirksmode.org/css/beforeafter.html上找到有关 Quirksmode 的示例。我用它在块引用周围插入巨大的引号......
HTH.
哈。
回答by silverliebt
It's advisable to qualify the styling of the <li>so it does not affect <ol>list items. So:
建议限定 的样式，<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;
}
回答by sdw
Font-awesome provides a great solution out of the box:
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>回答by bob
.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>