有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)

<ul>
  <li>abc</li>
</ul>

输出:

- abc

我想到了用像li:before {content: "-"};这样的东西来做这件事,尽管我不知道这个选项的缺点(非常感谢反馈)。

更一般地说,我不介意知道如何为列表项使用通用字符。


当前回答

让我再加上我自己的版本,主要是为了让我再次找到自己喜欢的解决方案:

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 { 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 {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

当使用键盘上不存在的符号时,请参阅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 >

使用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,它的工作完美!

我的解决方案是在添加额外的span标签与mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</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;
}