HTML列表样式类型的连字符

222

有没有一种方法可以用破折号（即-或- –或- —）在HTML中创建列表样式，即

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

输出：

- abc

li:before { content: "-" };尽管我不知道该选项的弊端，但我想用类似的方法来做到这一点（并且有很多反馈的义务）。

更笼统地说，我不介意知道如何将通用字符用于列表项。

— 布莱恩·亨特
source

79

由于破折号通常用于列表中，为什么CSS默认不包含它？

— temirbek，2011年

101

更重要的是，为什么会有亚美尼亚编号和片假名...但没有破折号？

— 亨利·C

108

您可以使用:before并content:记住IE 7或更低版本不支持此功能。如果您对此表示满意，那么这是您的最佳解决方案。有关完整详细信息，请参见“ 我可以使用”或QuirksMode CSS兼容性表。

在较旧的浏览器中应该使用的较差的解决方案是将图像用作要点，并使图像看起来像破折号。有关示例，请参见W3C list-style-image页面。

— 达科Z
source

27

问题:before在于，当列表项跨越多行时，第二行上的缩进会在破折号所在的位置开始，从而破坏了缩进的列表效果。您需要使用悬挂缩进来避免这种情况。看到这个：alistapart.com/articles/taminglists

— chiborg

3

要放置在MDASH content使用content: "\2014\a0"

— 伊凡ž

请参阅@three的答案，该答案更加通用且不那么冗长！

— Ben Vertonghen

221

有一个简单的解决方法（文本缩进）可以使: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

展开摘要

— 阿隆·拉卡托斯
source

14

可行，但不要忘记将放置list-style-type: none;到<ul>元素上。

— toesslab 2015年

5

没有缩进ul li:before{ content:"- ";}

— -Qlimax

4

我更喜欢添加display: block; float: left;，li:before这样可以更轻松地将其从内容流中拉出，否则很难使第一行和后续行正确对齐。或Keyan Zhang的答案也可以绝对定位。

— 西蒙·伊斯特

8

非常愚蠢的是list-style-type dash不是CSS的一部分已经

— Pixelomo

与您提出的方案类似的纯HTML解决方案是什么？

— pluton

74

这是一个没有相对或绝对位置且没有文本缩进的版本：

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

请享用 ;）

— 天鹅绒
source

1

大！我建议'ul.dash> li：before'。否则内部的问题会被搞砸。

— w.stoettinger

1

我更喜欢添加display: block; float: left;，li:before这样可以更轻松地将其从内容流中拉出，否则很难使第一行和后续行正确对齐。或Keyan Zhang的答案也可以绝对定位。

— 西蒙·伊斯特

我用这个作为导航.active带班li:before { visibility: hidden; }和li.active:before { visibility: visible; }

— sshow

最好的建议imo！

— Ben Vertonghen

64

用这个：

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

— 亚瑟
source

3

不幸的是，它不尊重CSS文本的颜色。

— Hereblur

7

电子邮件的唯一可能解决方案

— Oleg 2014年

它现在不适用于Gmail（2018年11月）和Outlook 2016。

— user2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

演示小提琴

— 张克恩
source

25

让我也添加我的版本，主要是让我再次找到自己喜欢的解决方案：

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

— 三
source

恕我直言，这是迄今为止最好的解决方案。谢谢分享！

— Axel

14

就我而言，将此代码添加到CSS

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

够了。就这么简单。

— 阿尔伯特·索斯诺夫斯基
source

1

假定这是CSS的相对较新的功能，因为我找不到其他提及它的答案，但这实际上应该是当今公认的答案。

— ahstro

4

这似乎仅在桌面Firefox中受支持：developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave

Chrome现在也支持此功能（我相信目前为79）：chromestatus.com/feature/5893875400966144和caniuse.com/#feat=mdn-css_properties_list-style-type_string

— Alex

9

最佳答案之一对我不起作用，因为经过一番尝试和错误之后，li：before还需要使用css规则display：inline-block。

所以这对我来说是一个完全有效的答案：

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

— 乔瑞
source

这是用LESS / SASS编写的。

— Arslan Ameer

7

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

— 用户名
source

可能是``ul {margin：0; list-style-type：无；} ul li：before {content：“-”;}```否则也会影响ol列表

— Sasha Bond

5

这是我的小提琴版本：

该（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;
}

— 比奇洛普
source

3

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

我从来没有尝试过使用：before，尽管它可能会起作用。缺点是某些较旧的浏览器将不支持它。我的直觉是，这仍然足够重要，需要考虑。将来，这可能不再那么重要。

编辑：我已经使用OP的方法做了一些测试。在IE8中，我无法使用该技术，因此它绝对还不是跨浏览器。此外，在Firefox和Chrome中，将list-style-type设置为none似乎没有被忽略。

— 镍
source

3

我的解决方案是在其中添加带有mdash的额外span标签：

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

— 维克多·斯塔古罗夫（Victor Stagurov）
source

3

其他方式：

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

— 伊莫斯
source

3

CSS：

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

— 黑栗
source

1

这不适用于跨越多行的项目

— jenlampton

2

代替使用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，它可以完美工作！

— 卡罗琳·科莫瓦（Carolyne Comtois）
source

7

这很糟糕，原因有二。首先，您将项目符号直接放在文本中，混合内容和样式。其次，您滥用dl元素，这是有关正确使用的文章。

— mzgajner 2014年

1

对于今天有这个问题的任何人，解决方案都是：

列表样式：“-”

— 蜜蜂蝙蝠
source

-1

对我有用的是

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

— 奥尼尔
source