HTML 列表样式类型的破折号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3200249/
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
HTML list-style-type dash
提问by Brian M. Hunt
Is there a way to create a list-style in HTML with a dash (i.e. - or – –or — —) i.e.
有没有办法用破折号（即 - 或 -–或 - —）在 HTML 中创建列表样式，即
<ul>
<li>abc</li>
</ul>
Outputting:
输出：
- abc
It's occurred to me to do this with something like li:before { content: "-" };, though I don't know the cons of that option (and would be much obliged for feedback).
li:before { content: "-" };我想到用类似的东西来做这个，虽然我不知道那个选项的缺点（并且非常有必要提供反馈）。
More generically, I wouldn't mind knowing how to use generic characters for list items.
更一般地说，我不介意知道如何为列表项使用通用字符。
采纳答案by Darko Z
You could use :beforeand content:bearing in mind that this is not supported in IE 7 or below. If you're OK with that then this is your best solution. See the Can I Useor QuirksModeCSS compatibility tables for full details.
您可以使用:before并content:记住，这在 IE 7 或更低版本中不受支持。如果你同意，那么这是你最好的解决方案。有关完整详细信息，请参阅Can I Use或QuirksModeCSS 兼容性表。
A slightly nastier solution that should work in older browsers is to use an image for the bullet point and just make the image look like a dash. See the W3C list-style-imagepagefor examples.
应该在较旧的浏览器中工作的稍微讨厌的解决方案是使用图像作为项目符号，并使图像看起来像破折号。有关示例，请参阅W3Clist-style-image页面。
回答by aron.lakatos
There is an easy fix (text-indent) to keep the indented list effect with the :beforepseudo class.
有一个简单的修复（文本缩进）来保持:before伪类的缩进列表效果。
ul {
margin: 0;
}
ul.dashed {
list-style-type: none;
}
ul.dashed > li {
text-indent: -5px;
}
ul.dashed > li:before {
content: "-";
text-indent: -5px;
}Some text
<ul class="dashed">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Last text回答by velop
Here's a version without any position relative or absolute and without text-indent:
这是一个没有任何相对或绝对位置且没有文本缩进的版本：
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
Enjoy ;)
享受 ;）
回答by Jase
Use this:
用这个：
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
回答by Keyan Zhang
回答by three
Let me add my version too, mostly for me to find my own preferred solution again:
让我也添加我的版本，主要是为了让我再次找到自己喜欢的解决方案：
ul {
list-style-type: none;
/*use padding to move list item from left to right*/
padding-left: 1em;
}
ul li:before {
content: "–";
position: absolute;
/*change margin to move dash around*/
margin-left: -1em;
}<!--
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash'
Give credit and enjoy!
-->
Some text
<ul>
<li>One</li>
<li>Very</li>
<li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Approach!</li>
</ul>回答by Albert Sosnowski
In my case adding this code to CSS
在我的情况下，将此代码添加到 CSS
ul {
list-style-type: '- ';
}
was enough. Simple as it is.
就够了。就这么简单。
回答by user3849374
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
回答by Joery
One of the top answers did not work for me, because, after a little bit trial and error, the li:before also needed the css rule display:inline-block.
最重要的答案之一对我不起作用，因为经过一些反复试验，li:before 还需要 css 规则 display:inline-block。
So this is a fully working answer for me:
所以这对我来说是一个完全有效的答案：
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
回答by biziclop
Here is my fiddleversion:
这是我的小提琴版本：
The (modernizr) class .generatedcontenton <html>practically means IE8+ and every other sane browser.
该（Modernizr的）级.generatedcontent上<html>几乎意味着IE8 +和所有其他浏览器理智。
<html class="generatedcontent">
<ul class="ul-dash hanging">
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
<li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
</ul>
CSS:
CSS：
.ul-dash {
margin: 0;
}
.ul-dash {
margin-left: 0em;
padding-left: 1.5em;
}
.ul-dash.hanging > li { /* remove '>' for IE6 support */
padding-left: 1em;
text-indent: -1em;
}
.generatedcontent .ul-dash {
list-style: none;
}
.generatedcontent .ul-dash > li:before {
content: "–";
text-indent: 0;
display: inline-block;
width: 0;
position: relative;
left: -1.5em;
}
