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

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

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

2017-01-25 16:12:26

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

您可以参考MDN

2021-03-07 14:15:48

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

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

2017-01-25 16:12:26

用这个:

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

2013-04-23 17:58:27

以下是我的小提琴版本:

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

2013-01-09 13:09:45

CSS:

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

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

HTML:

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

2015-06-27 05:56:11

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

推荐文章

最新文章

标签