如何缩进自定义无序列表中的文本 [英] How to indent the text in a custom unordered list

问题描述

提琴: http://jsfiddle.net/pgf0ckfj/1/

CSS:

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

如您所见，文本没有像普通的UL那样缩进.

As you can see the text is not indented like the normal UL.

如何修改CSS以确保文本缩进，以防溢出到下一行.

How can I modify the CSS to ensure the text is indented for anything overflowing to the next line.

推荐答案

将li设置为position: relative;，然后将伪元素设置为position: absolute;，同时使用负的left值.添加相对定位将确保您绝对定位的伪元素将根据li的位置和大小自行定位.

Set the li to position: relative; and then your pseudo element to position: absolute; along with a negative left value. Adding relative positioning will make sure that your absolute positioned pseudo element will position itself based on the location and size of the 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>

这篇关于如何缩进自定义无序列表中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！