有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)
<ul>
<li>abc</li>
</ul>
输出:
- abc
我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。
更一般地说，我不介意知道如何为列表项使用通用字符。
你可以使用:before和content:，记住这在ie7或以下版本中是不支持的。如果你同意，那么这就是你最好的解决方案。详见Can I Use或QuirksMode CSS兼容性表。
在老版本的浏览器中，还有一种稍微糟糕一点的解决方案，那就是使用图像作为项目符号，并使图像看起来像一个破折号。有关示例，请参阅W3C列表样式的图像页面。
我不知道是否有更好的方法，但是您可以创建一个描述破折号的自定义项目符号图形，然后通过list-style-type属性让浏览器知道您想在列表中使用它。该页上的一个示例展示了如何使用图形作为项目符号。
我从来没有试过用你的方法，虽然它可能有用。缺点是一些较老的浏览器不支持它。我的本能反应是，这一点仍然很重要，值得考虑。在未来，这可能不那么重要了。
编辑:我已经用OP的方法做了一些测试。在IE8中，我无法让这项技术发挥作用，所以它肯定还不能跨浏览器。此外，在Firefox和Chrome中，同时将list-style-type设置为none似乎会被忽略。
有一个简单的修复(文本缩进)来保持缩进列表效果，在伪类之前使用:。
ul { 保证金:0; ｝ ul。{破灭 list-style-type:没有; ｝ ul。虚线> li { indent: 5 px; ｝ ul。虚线> li:before { 内容:“-”; indent: 5 px; ｝ 一些文本 < ul类=“冲”> <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > < ul > <李>第一李< / > <李>第二李< / > <李>第三李< / > < / ul > 最后的文本
以下是我的小提琴版本:
<html>上的(modernizr)类.generatedcontent实际上意味着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:
.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;
}
我的解决方案是在添加额外的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;
}
使用dl(定义列表)和dd代替lu li。 <dd>可以使用标准的CSS样式来定义，例如{color:blue;font-size:1em;}，并且可以使用放在HTML标记后的任何符号作为标记。它的工作方式类似于ul li，但允许您使用任何符号，您只需缩进它就可以获得通常使用ul li获得的缩进列表效果。
CSS:
dd{text-indent:-10px;}
HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>
给你更干净的代码!这样，你可以使用任何类型的字符作为标记!缩进大约是-10px，它的工作完美!
用这个:
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
下面是一个没有任何相对或绝对位置，也没有文本缩进的版本:
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
喜欢。)
另一种方法:
li:before {
content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
list-style: none;
text-indent: -1.5em;
padding-left: 1.5em;
}
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示小提琴
CSS:
li:before {
content: '— ';
margin-left: -20px;
}
li {
margin-left: 20px;
list-style: none;
}
HTML:
<ul>
<li>foo</li>
<li>bar</li>
</ul>
让我再加上我自己的版本，主要是为了让我再次找到自己喜欢的解决方案:
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>
https://codepen.io/burningTyger/pen/dNzgrQ
对我有用的是
<ul>
<li type= "none"> – line 1 </li>
<li type= "none"> – line 2 </li>
<li type= "none"> – line 3 </li>
</ul>
上面的一个答案不适合我，因为，经过一点点的尝试和错误，li:before也需要css规则display:inline-block。
所以这对我来说是一个完全可行的答案:
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
HTML
<ul>
<li>One</li>
<li>Very</li>
<li>Simple</li>
<li>Approach!</li>
</ul>
CSS
ul {
list-style-type: none;
}
ul li:before {
content: '-';
position: absolute;
margin-left: -20px;
}`
当使用键盘上不存在的符号时，请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号，请参阅HTML字符实体引用中的CSS代码列表。 对于键盘上的符号，直接使用键盘符号作为list-style-type属性的值。
参见下面的示例代码:
<！——查看HTML实体的符号不是在键盘上——> <h3>HTML实体:长向右双箭头</h3> <ul style="list-style-type: '\27F9';"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul > <！——直接使用键盘上的符号——> <h3>键盘上的破折号</h3> <ul style=" font - family:宋体;"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul >
