Bri*_*unt 209 html css xhtml html-lists
有没有办法用破折号(即 - 或 - –或 - —)创建HTML格式的列表样式
<ul>
<li>abc</li>
</ul>
输出:
- abc
li:before { content: "-" };虽然我不知道该选项的缺点(并且非常有必要提供反馈),但是我想到了这样的事情.
更一般地说,我不介意知道如何使用通用字符列表项.
小智 214
有一个简单的修复(文本缩进)来保持缩进列表效果与: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 textDar*_*o Z 105
您可以使用:before并content:牢记IE 7或更低版本不支持此功能.如果您对此感到满意,那么这是您最好的解决方案.有关完整详细信息,请参阅Can I Use或QuirksMode CSS兼容性表.
在旧版浏览器中应该使用的稍微有点麻烦的解决方案是使用图像作为项目符号,并使图像看起来像破折号.有关示例,请参阅W3C list-style-image页面.
vel*_*lop 66
这是一个没有任何位置相对或绝对且没有文本缩进的版本:
ul.dash {
list-style: none;
margin-left: 0;
padding-left: 1em;
}
ul.dash > li:before {
display: inline-block;
content: "-";
width: 1em;
margin-left: -1em;
}
请享用 ;)
小智 64
用这个:
ul
{
list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
小智 30
ul {
list-style-type: none;
}
ul > li:before {
content: "–"; /* en dash */
position: absolute;
margin-left: -1.1em;
}
演示小提琴
thr*_*ree 23
让我添加我的版本,主要是让我再次找到自己喜欢的解决方案:
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
小智 10
最重要的答案之一对我不起作用，因为经过一些反复试验，li:before 还需要 css 规则 display:inline-block。
所以这对我来说是一个完全有效的答案：
ul.dashes{
list-style: none;
padding-left: 2em;
li{
&:before{
content: "-";
text-indent: -2em;
display: inline-block;
}
}
}
小智 7
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
小智 6
就我而言，将此代码添加到CSS
ul {
list-style-type: '- ';
}
够了。就这么简单。
这是我的小提琴版本：
该（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：
.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;
}