li的第二行从CSS重置后的项目符号开始

ul使用CSS重置后，我的-list出现了一些问题。

当中的文字li很长且折断到第二行时，文字从项目符号下方开始。我希望它以与项目符号右侧文本相同的边距/填充开头。

有点难以解释，但是如果您查看示例图像。左图是今天的列表。子弹头下面是“ motta varsel [...]”，但我希望它看起来在右边。

如何使用CSS做到这一点？我认为我忽略了一些非常简单的事情，但是我不知道是什么。Google搜索也没有返回任何有用的信息。

该li标签有一个叫做财产list-style-position。这使您的项目符号位于列表的内部或外部。默认情况下，它设置为inside。这样一来，您的文字就会环绕起来。如果将其设置为outside，则li标签文本将对齐。

不利的一面是，您的项目符号将不会与之外的文本对齐ul。如果要使其与其他文本对齐，可以使用边距。

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日， 看到人们仍然来自Google，我觉得原来的答案可能会有所改善

• 更改了代码块以仅提供解决方案
• 改变了压痕单元em的
• 每个属性都应用于ul元素
• 好评论:)

这是一个很好的例子-

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

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

我第二次回答Dipaks的问题，但通常只是文字缩进就足够了，因为您可能/可能不会将ul放在更好的布局控制中。

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