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属性。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: