li的第二行在CSS重置之后从子弹开始

在使用CSS重置之后，我在使用ul -list时遇到了一些问题。

当li的文本很长并且打破了第二行时，文本从子弹开始。 我希望它以与项目符号右侧的文本相同的边距/填充开始。

有点难以解释，但是如果你看一下示例图像。 左图是今天的列表。 “motta varsel”从子弹开始，但是我希望能看到右边的图片。

我怎样才能做到这一点与CSS？ 我认为我忽略了一些非常简单的东西，但我无法弄清楚是什么。 谷歌search也没有返回任何有用的。

Answer 1

li标签有一个名为list-style-position的属性。 这使得你的子弹在列表内部或外部。 默认情况下，它被设置在inside 。 这使得你的文字环绕它。 如果您将其设置为outside ，则您的li标签的文本将被alignment。

其缺点是你的子弹不会与ul之外的文字alignment。 如果您想将其与其他文字alignment，则可以使用边距。

 ul li { /* * We want the bullets outside of the list, * so the text is aligned. Now the actual bullet * is outside of the list's container */ list-style-position: outside; /* * Because the bullet is outside of the list's * container, indent the list entirely */ margin-left: 1em; } 

---

编辑2014年3月15日，看到人们仍然从谷歌进来，我觉得原来的答案可以使用一些改进

• 改变了代码块来提供解决scheme
• 将缩进单元更改为em
• 每个属性都应用于ul元素
• 好评:)

Answer 2

这是一个很好的例子 –

 ul li{ list-style-type: disc; list-style-position: inside; padding: 10px 0 10px 20px; text-indent: -1em; } 

工作演示： http : //jsfiddle.net/d9VNk/

Answer 3

我第二个Dipaks的答案，但往往只是文本缩进就足够了，因为你可能/可能不会定位ul更好的布局控制。

 ul li{ text-indent: -1em; }