HTML列表-样式-类型破折号

小开

最佳答案

你可以使用:before和content:，记住这在ie7或更低版本中是不支持的。如果你同意，那么这就是你最好的解决方案。详细信息请参见我可以用或QuirksMode CSS兼容性表。

在老版本的浏览器中，还有一种稍微糟糕一点的解决方案，那就是使用图像作为项目符号，并使图像看起来像一个破折号。有关示例，请参阅W3C list-style-image页面。

小开

我不知道是否有更好的方法，但你可以创建一个自定义的项目符号图形，描绘一个破折号，然后让浏览器知道你想在你的列表中使用它与list-style-type属性。该页上的一个示例展示了如何使用图形作为项目符号。

我从来没有试过用你的方法，虽然它可能有用。缺点是一些较老的浏览器不支持它。我的本能反应是，这一点仍然很重要，值得考虑。在未来，这可能不那么重要了。

编辑:我已经用OP的方法做了一些测试。在IE8中，我无法让这项技术发挥作用，所以它肯定还不能跨浏览器。此外，在Firefox和Chrome中，同时将list-style-type设置为none似乎会被忽略。

小开

在: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

小开

下面是我的小提琴版本:

<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">&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;
}

小开

不使用lu li，使用dl (definition list) and dd。 <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>

小开

在我的例子中，将这些代码添加到CSS中

ul {
list-style-type: '- ';
}

就足够了。很简单。

小开

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

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>

< a href = " https://codepen。io / burningTyger /钢笔/ dNzgrQ noreferrer“rel = > https://codepen.io/burningTyger/pen/dNzgrQ < / >

小开

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

小开

对于今天遇到这个问题的人来说，解决方法很简单:

列表样式:"- "

小开

对我有用的是

<ul>
<li type= "none">  &ndash; line 1 </li>
<li type= "none">  &ndash; line 2 </li>
<li type= "none">  &ndash; 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;
}
}
}

小开

超文本标记语言

<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;
}`

小开

你可以像这样设置li::marker:

li::marker {
content: '- ';
}

小开

ul {
list-style-type: '-';
}

你可以参考中数

小开

当使用键盘上不存在的符号时，请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号，请参阅HTML字符实体引用的CSS代码列表。
对于键盘上的符号，直接使用键盘符号作为list-style-type属性的值。

参见下面的示例代码:

<!-- See HTML entities for symbols NOT on the keyboard -->
<h3>HTML Entities: Long Rightwards Double Arrow</h3>
<ul style="list-style-type: '\27F9';">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>


<!-- Use symbols on the keyboard directly -->
<h3>Dash symbol on the keyboard</h3>
<ul style="list-style-type: '-';">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>