如何缩进自定义无序列表中的文本

Question

CSS:

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦ ";
    color: #E55302;
}

如您所见，文本没有像正常那样缩进 UL。

如何修改 CSS 以确保文本缩进以防止溢出到下一行的内容。

Answer 1

将 li 设置为 position: relative;，然后将伪元素设置为 position: absolute; 以及一个负值 left。添加相对定位将确保您的绝对定位伪元素将根据 li.

的位置和大小自行定位

ul {
    list-style: none;
    padding: 0 0 0 45px;
}
ul li:before {
    content: "♦";
    color: #E55302;
    position: absolute;
    left: -15px;
}
li {
  position: relative;
  }

<ul>
 <li>This is the first entry but only goes one line</li>
 <li>This is the second entry but only goes one line</li>
 <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
 <li>This is the fourth entry but only goes one line</li>
 <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
</ul>

Answer 2

添加 text-indent 属性。

ul {
  text-indent: -20px;
  /* add text-indent */
  list-style: none;
}
ul li:before {
  content: "♦ ";
  color: #E55302;
}

<ul>
  <li>This is the first entry but only goes one line</li>
  <li>This is the second entry but only goes one line</li>
  <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
  <li>This is the fourth entry but only goes one line</li>
  <li>This is the third entry but it can go many many many lines and sometimes even a whole paragraph and I would like the text to be indented from the bullet.</li>
</ul>

如何缩进自定义无序列表中的文本

How to indent the text in a custom unordered list

html

css

html-lists