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

我意识到可以使用CSS attribute:

指定自定义图形作为替代项目符号字符。

list-style-image

然后给它一个URL

然而，在我的例子中，我只想使用"+"符号。我不想为它创建一个图形，然后指向它。我宁愿指示无序列表使用加号作为项目符号。

这可以做到吗?还是我必须先制作一个图形?

这是一个迟来的答案，但我刚刚看到这个…要在任何换行行上正确缩进，请尝试这样做:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
li {
  padding-left: 1em;
  text-indent: -1em;
}
li:before {
  content: "+";
  padding-right: 5px;
}

以下引用自 tamaming Lists:

有时候你有一个列表，但是你不想要任何符号，或者你想用其他字符来代替符号。同样，CSS提供了一个直接的解决方案。只需添加list-style: none;到您的规则，并强制使用悬挂缩进显示li。该规则看起来像这样:
ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}
填充或边距需要设置为零，另一个设置为1em。根据您选择的"项目"，您可能需要修改此值。负缩进会导致第一行向左移动该量，从而创建一个悬挂缩进。
HTML将包含我们的标准UL，但是使用您想要使用的任何字符或HTML实体来代替列表项内容前面的项目符号。在本例中，我们将使用»，右双角引号:».
»项目1
»项目2
»项目3
»项目4
第5项我们将使
稍微长一点，以便
它会把

这是W3C的解决方案。适用于Firefox, Chrome和Edge。

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>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

你也可以设置内联样式。将单个'和双引号"组合以避免冲突:

<ul style="list-style-type: '🔔 ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

如果你不能冒险在源代码中编写unicode，你仍然可以在list-style-type中设置HTML实体(即:🔔)，它将被正确呈现(即:🔔) -运行代码片段来尝试一下。

<ul style="list-style-type: '&#x1F514; ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

很多解决方案。
但我认为仍有改进的余地。

优点:

非常紧凑的代码
适用于任何字体大小
(不包含绝对像素值)
完全对齐
(第一行和后面的行之间没有轻微的移动)

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>

这是目前为止我发现的最好的解决方案。它工作得很好，它是跨浏览器的(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是你想要的宽度，根据你的需要改变它。

Font-awesome提供了一个很好的解决方案:

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

您可以使用:before伪选择器在列表项前面插入内容。你可以在Quirksmode上找到一个例子，网址是http://www.quirksmode.org/css/beforeafter.html。

HTH。

我的解决方案是使用定位让换行行自动正确对齐。因此，您不必担心在。

之前的li:上设置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>

建议限定<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;
}

可以使用::marker伪元素。当您需要为每个列表项使用不同的字符实体时，这很有用。

正如@Kal提到的，::marker上的内容在编辑时在Safari中是不支持的。

ul li::marker {
  content: " "; /* Your symbol here */
}

ul li:nth-child(1)::marker {
  content: "26BD   ";
}
ul li:nth-child(2)::marker {
  content: "26C5   ";
}
ul li:nth-child(3)::marker {
  content: "26F3   ";
}
ul li::marker {
  font-size: 20px;
}
ul li {
  margin: 15px 0;
  font-family: sans-serif;
  background: #BADA55;
  color: black;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
}

<ul>
  <li>France Vs Croatia</li>
  <li>Cloudy with sunshine</li>
  <li>Golf session ahead</li>
</ul>

.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>

.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>

Em - dash style:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "20140A0"; /* em dash + space*/
}

我更喜欢使用负边距，给你更多的控制

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}
li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

有趣的是，我不认为任何张贴的解决方案都足够好，因为它们依赖于这样一个事实，即所使用的字符是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>

与其他解决方案相比，这有以下优点:

它让你完全控制子弹所使用的空间。你可以用任何东西代替30px(甚至1em等)。只是别忘了在这三个地方都改一下。
它让你完全控制子弹的位置。只要用你喜欢的任何东西替换text-align: center;。例如，你可以试试color: red; text-align: right; padding-right: 5px; box-sizing: border-box;或者，如果你不喜欢玩border-box，只需从宽度(即宽度:25px)减去填充(5px)。有很多选择。
它不使用浮动，所以它可以包含在任何地方。

享受。

在Bootstrap中你可以使用list-unstyled类。然后，你可以使用例如HTML表情符号或其他东西来代替项目符号:

<ul class="text-dark display-4 list-unstyled">
    <li>&#127774; Phasellus iaculis neque</li>
    <li>&#127803; Purus sodales ultricies</li>
    <li>&#127774; Vestibulum laoreet porttitor sem</li>
    <li>&#127803; Ac tristique libero volutpat at</li>
</ul>

首先，感谢@Jpsy，因为我的答案是基于它。

我已经扩展了这个答案，以支持Google Material Icons包作为自定义图标。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>

ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}
ul li:before {
    font-family: 'Material Icons';
    content: "double_arrow"; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
    position: absolute;
    left: 0;
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

不是最好的答案，但我喜欢最小的css。

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

unicode for +: 002B

unicode for white space: 00a0

您可以在unicode中搜索其他符号并添加空白，直到您对定位满意为止。

注:有人给出了几乎相同的答案，但我不能评论。

try this

    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>

相关内容

最新更新

热门标签：