代码之家 › 专栏 › 技术社区 › Brian M. Hunt

HTML列表样式类型短划线

html-lists xhtml css html

191

Brian M. Hunt · 技术社区 · 16 年前

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

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

输出:

- abc

我突然想到要用 li:before { content: "-" }; 尽管我不知道这一选择的缺点(并且非常感谢您的反馈)。

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

16 回复 | 直到 8 年前

Simon E. pbs 10 年前

你可以使用 :before 和 content: 记住,这在IE 7或更低版本中不受支持。如果你同意的话,这是你最好的解决方案。见 Can I Use 或 QuirksMode 有关完整详细信息的CSS兼容表。

一个稍微棘手的解决方案,应该在旧的浏览器中工作,就是使用一个图像作为项目符号点,使图像看起来像一个破折号。见 W3C list-style-image page 举个例子。

202

MrMeszaros 10 年前

有一个简单的修复(文本缩进)来保持缩进列表效果 :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

Peter Mortensen Pieter Jan Bonestroo 9 年前

使用此:

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

velop 10 年前

这是一个没有任何相对或绝对位置和文本缩进的版本:

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

享受;

GÊá´á´á´ÊCá´á´ 9 年前

ul {
  list-style-type: none;
}

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

演示 fiddle

Axel 8 年前

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

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

user3849374 9 年前

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

GÊá´á´á´ÊCá´á´ 9 年前

这是我的 fiddle 版本:

(现代化)阶级 .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;
}

Albert Sosnowski 9 年前

在我的示例中,将此代码添加到CSS

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

就够了。其实很简单。

Victor Stagurov 13 年前

我的解决方案是添加额外的包含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;
}

TNi 16 年前

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

我从来没有试过用过:以前用过你的方式,虽然可能有用。缺点是,有些老版本的浏览器不支持它。我的本能反应是,这仍然是重要的,足以考虑。在未来,这可能没有那么重要。

编辑:我用OP的方法做了一些测试。在IE8中,我无法让这项技术发挥作用,所以它肯定还没有跨浏览器。此外,在火狐和Chrome中,将列表样式类型设置为“无”似乎被忽略。

Walery Strauch Lia 13 年前

而不是用陆莉,用 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 而且工作得很完美!

Community Mohan Dere 12 年前

另一种方式:

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

Peter Mortensen Pieter Jan Bonestroo 9 年前

CSS:

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

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

HTML:

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

Bee Bat 8 年前

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

列表样式:“-”

-1

C oneil 8 年前

为我工作的是

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