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

Question

fiddle :http://jsfiddle.net/pgf0ckfj/1/

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>