有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
当前回答
我的解决方案是在添加额外的span标签与mdash:
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</span>XYZ</li>
</ul>
并添加到css:
ul.mdash-list
{
list-style:none;
}
ul.mdash-list li
{
position:relative;
}
ul.mdash-list li .mdash-icon
{
position:absolute;
left:-20px;
}
其他回答
我的解决方案是在添加额外的span标签与mdash:
<ul class="mdash-list">
<li><span class="mdash-icon">—</span>ABC</li>
<li><span class="mdash-icon">—</span>XYZ</li>
</ul>
并添加到css:
ul.mdash-list
{
list-style:none;
}
ul.mdash-list li
{
position:relative;
}
ul.mdash-list li .mdash-icon
{
position:absolute;
left:-20px;
}
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
我不知道是否有更好的方法，但是您可以创建一个描述破折号的自定义项目符号图形，然后通过list-style-type属性让浏览器知道您想在列表中使用它。该页上的一个示例展示了如何使用图形作为项目符号。
我从来没有试过用你的方法，虽然它可能有用。缺点是一些较老的浏览器不支持它。我的本能反应是，这一点仍然很重要，值得考虑。在未来，这可能不那么重要了。
编辑:我已经用OP的方法做了一些测试。在IE8中，我无法让这项技术发挥作用，所以它肯定还不能跨浏览器。此外，在Firefox和Chrome中，同时将list-style-type设置为none似乎会被忽略。
在我的例子中，将这些代码添加到CSS中
ul {
list-style-type: '- ';
}
就足够了。很简单。
CSS:
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
