当前位置： 文江博客话题详情

  • 的自定义项目符号
      中的元素这是一个常规字符，而不是图像

    • 发布于 2024-12-08 20:04:20 字数 200 浏览 0 评论 0原文

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

    list-style-image

    然后给它一个 URL。

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

    这可以完成还是我必须先将其制作成图形？

    原文

    I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:

    list-style-image

    And then giving it a URL.

    However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.

    Can this be done or am I forced to make it a graphic first?

    如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

    评论（19）

    风情万种。 2024-12-15 20:04:21

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

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

    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>

    You can make use of ::marker pseudo-element. This is useful in situations when you need to have different character entities for each list item.

    As @Kal mentions, content on ::marker is not supported in Safari at the time of edit.

    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>

    回复 原文
    っ左 2024-12-15 20:04:21
    .single-before {
    
  list-style: "
    


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

    回复 原文
    我一直都在从未离去 2024-12-15 20:04:21
    .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>

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

    回复 原文
    明月松间行 2024-12-15 20:04:21

    破折号样式：

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

    Em dash style:

    ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
    回复 原文
    千里故人稀 2024-12-15 20:04:21

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

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

    I prefer to use negative margin, gives you more control

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
    回复 原文
    不语却知心 2024-12-15 20:04:21

    有趣的是，我不认为任何已发布的解决方案都足够好，因为它们依赖于所使用的字符为 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; 替换为您喜欢的任何内容即可。例如你可以尝试
      <代码>
      颜色: 红色;
      文本对齐：右对齐；
      右内边距：5px；
      框大小：边框框；

      或者，如果您不喜欢使用边框框，只需从宽度中减去填充（5px）（即本例中的宽度：25px）。有很多选择。

    4. 它不使用浮动，因此可以包含在任何地方。

    享受。

    Interestingly enough I do not thing any of the posted solutions are good enough, because they rely on the fact that the character used is 1em wide, which does not need to be so (with maybe exception of John Magnolia's answer which however uses floats which can complicate things another way). Here is my attempt:

    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>

    This has these advantages (over other solutions):

    1. It does not rely on the width of the symbol as you see in the example. I used two characters to show that it works even with wide bullets. If you try this in other solutions you get the text misaligned (in fact it is even visible with * symbol in higher zooms).
    2. It gives you total control of the space used by bullets. You can replace 30px by anything (even 1em etc). Just do not forgot to change it on all three places.
    3. If gives you total control of positioning of the bullet. Just replace the text-align: center; by anything to your liking. For example you may try

      color: red;
      text-align: right;
      padding-right: 5px;
      box-sizing: border-box;

      or if you do not like playing with border-box, just subtract the padding (5px) from width (i.e. width:25px in this example). There are lots of options.
    4. It does not use floats so it can be contained anywhere.

    Enjoy.

    回复 原文
    戏剧牡丹亭 2024-12-15 20:04:21

    首先，感谢@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');
}

    First, thanks to @Jpsy as my answer is based on that.

    I have extended that answer to support the Google Material Icons pack as the custom icon.

    <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');
}
    回复 原文
    咿呀咿呀哟 2024-12-15 20:04:21

    在 Bootstrap 中，您可以使用 class list-unstyled。然后，您可以使用 HTML emoji 或其他内容来代替项目符号：

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

    In Bootstrap you can use class list-unstyled. Then, instead bullet you can use for example HTML emoji or something else:

    <ul class="text-dark display-4 list-unstyled">
    <li>🌞 Phasellus iaculis neque</li>
    <li>🌻 Purus sodales ultricies</li>
    <li>🌞 Vestibulum laoreet porttitor sem</li>
    <li>🌻 Ac tristique libero volutpat at</li>
</ul>
    回复 原文
    不乱于心 2024-12-15 20:04:21

    这不是最漂亮的答案，但我喜欢最小的 CSS。

    ul { list-style-type: '\002B\00a0\00a0'; }

    + 的 unicode：002B

    空格的 unicode：00a0

    您可以在 unicode 中搜索其他符号，只需添加空格，直到对位置满意为止。

    PS：有人给出了几乎相同的答案，但我无法评论。

    Not the preetiest answer but i like minimal css.

    ul { list-style-type: '\002B\00a0\00a0'; }

    unicode for +: 002B

    unicode for white space: 00a0

    You can search for other symbols in unicode and just add white space until you are satisfied with positioning.

    P.S.: Someone gave almost the same answer but I couldn't comment on it.

    回复 原文
    吖咩 2024-12-15 20:04:21

    试试这个

        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>

    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>

    回复 原文
    救赎№ 2024-12-15 20:04:20

    这是一个迟到的答案，但我刚刚遇到这个...要在任何换行上正确缩进，请尝试以下方式：

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

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

li:before {
  content: "+";
  padding-right: 5px;
}

    This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:

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

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

li:before {
  content: "+";
  padding-right: 5px;
}
    回复 原文
    累赘 2024-12-15 20:04:20

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

    ul { list-style-type: "

    This is the W3C solution. Works in Firefox, Chrome and 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>

    You can also style that inline. Combine single ' and double quotes " to avoid conflict:

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

    If you can't risk to write unicode in your source code you still can set the HTML entity (ie: 🔔) in the list-style-type and it will be properly rendered (ie: ????) - Run the code snippet to try it out.

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

    回复 原文
    北座城市 2024-12-15 20:04:20

    以下内容引自驯服列表：

    有时您可能有一个列表，但您不需要任何项目符号，或者您想使用其他字符来代替项目符号。 CSS 再次提供了一个简单的解决方案。只需添加 list-style: none;按照您的规则并强制 LI 以悬挂缩进显示。该规则将如下所示：

    <前><代码>ul {
    列表样式：无；
    左边距：0；
    左内边距：1em；
    文本缩进：-1em；
    }

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

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

    <块引用>

    » 第 1 项
    » 第 2 项
    » 第 3 项
    » 第 4 项
    » 我们将制作第 5 项
       长一点，这样
       它会换行

    The following is quoted from Taming Lists:

    There may be times when you have a list, but you don’t want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:

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

    Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the “bullet” that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.

    The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using », the right double angle quote: ».

    » Item 1
    » Item 2
    » Item 3
    » Item 4
    » Item 5 we'll make
       a bit longer so that
       it will wrap

    回复 原文
    故事灯 2024-12-15 20:04:20

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

    优点：

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

    So many solutions.
    But I still think there is room for improvement.

    Advantages:

    • very compact code
    • works with any font size
      (no absolute pixel values contained)
    • aligns rows perfectly
      (no slight shift between first line and following lines)

    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>

    回复 原文
    望喜 2024-12-15 20:04:20

    这是迄今为止我找到的最佳解决方案。它运行良好，并且是跨浏览器的（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 是您想要的角色宽度，根据您的需要进行更改。

    Here is the best solution I've found so far. It works great and it's cross-browser (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;
}

    The important thing is to have the character in a floating block with a fixed width so that the text remains aligned if it's too long to fit on a single line.
    1.2em is the width you want for your character, change it for your needs.

    回复 原文
    薄情伤 2024-12-15 20:04:20

    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>

    Font-awesome provides a great solution out of the box:

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

    回复 原文
    紅太極 2024-12-15 20:04:20

    您可以使用 :before 伪选择器在列表项前面插入内容。您可以在 http://www.quirksmode.org/css/beforeafter 找到 Quirksmode 的示例。 html。我用它在块引号周围插入巨大的引号...

    HTH。

    You can use the :before pseudo-selector to insert content in front of the list item. You can find an example on Quirksmode, at http://www.quirksmode.org/css/beforeafter.html. I use this to insert giant quotes around blockquotes...

    HTH.

    回复 原文
    锦上情书 2024-12-15 20:04:20

    我的解决方案使用定位来自动正确排列换行。所以你不必担心在 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>

    My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the li:before.

    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>

    回复 原文
    埖埖迣鎅 2024-12-15 20:04:20

    建议限定

  • 的样式，这样它就不会影响
      列表项。所以：
    • 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;
}

    It's advisable to qualify the styling of the <li> so it does not affect <ol> list items. So:

    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;
}
    回复 原文
    ~没有更多了~

    关于作者

    怪我太投入

    暂无简介

    0 文章
    0 评论
    23 人气
    发私信

    相关话题

    更多

    热门标签

    操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
    更多

    推荐作者

    醉城メ夜风

    文章 0 评论 0

    远昼

    文章 0 评论 0

    平生欢

    文章 0 评论 0

    微凉

    文章 0 评论 0

    Honwey

    文章 0 评论 0

    qq_ikhFfg

    文章 0 评论 0

    更多

    友情链接

    文江博客
      我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
      原文