<ul>中<li>元素的自定义项目符号是常规字符，而不是图像

125

我意识到可以使用CSS属性将自定义图形指定为替换项目符号字符：

list-style-image

然后给它一个URL。

但是，就我而言，我只想使用'+'符号。我不想为此创建图形然后指向它。我宁愿只是指示无序列表使用加号作为项目符号。

可以这样做吗？还是我必须先将其制成图形？

html  css  webkit  mobile-webkit 
— 明星
source

Answers:

81

从引用列表中引用以下内容：

有时候，您有一个列表，但是您不想要任何项目符号，或者您想要使用其他字符代替项目符号。同样，CSS提供了一个简单的解决方案。只需添加列表样式：none; 根据您的规则，并强制LI显示带有悬挂式缩进。该规则将如下所示：

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

填充或边距都需要设置为零，而另一个则设置为1em。根据您选择的“项目符号”，您可能需要修改此值。负的文本缩进会使第一行向左移动该量，从而产生一个悬挂的缩进。

HTML将包含我们的标准UL，但要使用任何字符或HTML实体来代替列表项内容之前的项目符号。在本例中，我们将使用»，右双引号：»。

»项目1
»项目2
»项目3
»项目4
»项目5我们会
   加长一点，以便
   包裹起来

— TJ WealthEngine API推广者
source
1
您的解决方案可以与您和@Tieson T.都指向的：before伪选择器结合使用。我喜欢您指出<UL>上的各种属性如何协同工作以模仿子弹缩进。
— idStar 2011年
9
这是我将其组合在一起的方式，该方法起作用：ul {font-size：14px; 行高：16px；列表样式：无；左边距：0；padding-left：1em；文字缩进：-1em；} li：之前{content：“ +”; }我确实必须在+符号后加一个空格，但是看起来对齐得很好。
— idStar 2011年
6
不幸的是，使用这种方法时，项目符号中会包含项目符号，而普通项目符号则不然。
— KonradHöffner'12年
169

这是一个较晚的答案，但我只是碰到了这一点...要使换行的缩进正确无误，请尝试以下方式：

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
— 迈克·T
source
1
对我来说，最好使用ch作为度量单位，特别是text-indent: -2ch先考虑+号及其后的空格，然后再padding-right: 1ch添加该空格。仍然是+1。
— cobaltduck
44

这么多解决方案。
但是我仍然认为还有改进的空间。

优点：

  • 非常紧凑的代码
  • 适用于任何字体大小
    （不包含绝对像素值）
  • 完美对齐行
    （第一行和后续行之间没有轻微的偏移）

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
展开摘要

— 吉普赛人
source
2
这是最好的
— user3168511
1
我认为这是一个更好的答案，因为它指出了如何自定义其他详细信息。并且还附带了“运行代码段”！
— Ionuț Ciuta
1
这应该是答案。清洁和简单
— EvilDr
1
我一直在寻找一种使用图像的解决方案，并尝试了很多答案，但是这个方法最适合我！我能够使用content: url('link-to-my-asset.svg');和设置项目符号和内容之间的图像宽度和填充。谢谢！
— AnnieP
这是一个很好的答案。但是，我需要一个也可以支持列数的解决方案
— Kushagr Arora
29

这是W3C解决方案。在Firefox和Chrome中均可使用。

ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }
  <ul><li>item</li></ul>
展开摘要

— PHPst
source
2
尽管它似乎可以在当前版本的Firefox中使用，但结果却非常丑陋：自定义项目符号被放置在文本内容的前面（对其进行捕捉），几乎就像li:before {content:"…";}是在没有任何其他缩进和对齐方式的情况下使用的那样。
— 安东·萨姆索诺夫，2016年
19

这是到目前为止我找到的最好的解决方案。它的工作原理很棒，并且是跨浏览器（IE 8+）。

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

重要的是将字符放置在具有固定宽度的浮动块中，这样，如果文本太长而无法容纳在一行上，则文本将保持对齐。 1.2em是您想要的字符宽度，请根据需要进行更改。

— 尼古拉斯·伯尼尔
source
这很容易是我找到的最佳解决方案。
— 查尔斯·罗珀
float再次滥用？……不。
10

我的解决方案使用定位来使换行自动正确对齐。因此，您不必担心在li：before上设置padding-right。

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
展开摘要

— 用户名
source
8

建议限定的样式，<li>以免影响<ol>列表项。所以：

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}
— 银币
source
8

真棒字体提供了一个出色的解决方案：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>
展开摘要

— sdw
source
4 

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
展开摘要

— 鲍勃
source
— 出于
2

破折号样式：

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
— dmartinezfernandez
source
1

我更喜欢使用负边距，让您有更多的控制权

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
— 约翰木兰
source
1

有趣的是，我并不认为任何发布的解决方案都足够好，因为它们依赖于所使用字符为1em宽的事实，这不是必须的（John Magnolia的答案可能是例外，但使用浮动字符可以用另一种方式使事情复杂化）。这是我的尝试：

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
展开摘要

与其他解决方案相比，它具有以下优点：

  1. 如示例所示，它并不依赖于符号的宽度。我用两个字符表明它即使在宽子弹下也能正常工作。如果您在其他解决方案中尝试此操作，则会使文本未对齐（实际上，即使在更高的缩放比例中，带*符号的文字也可见）。
  2. 它使您可以完全控制子弹所占用的空间。您可以用任何东西（甚至1em等）替换30px。只是不要忘记在所有三个地方都进行更改。
  3. 如果可以完全控制子弹的位置。只要text-align: center;按您的喜好替换任何东西即可。例如，您可以尝试， color: red; text-align: right; padding-right: 5px; box-sizing: border-box; 或者如果您不喜欢使用边框游戏，只需从宽度中减去填充（5px）（即本示例中的width：25px）。有很多选择。
  4. 它不使用浮点数，因此可以包含在任何地方。

请享用。

— rn
source
1 

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>
展开摘要

— 维拉吉里（Viraj Giri）
source
谢谢您-非常干净，我忘记了!important，这对于使我的自定义CSS在Blogspot中正常工作至关重要
— velkoon
-2

试试这个

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>
展开摘要

— 文卡特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.