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

Question

使用CSS-reset后，我的ul - 列表出现了问题。

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

难以解释，但如果你看一下example-image。左图是今天的列表。 “motta varsel [...]”从子弹开始，但我希望看到右边的图片。

如何使用CSS执行此操作？我认为有一些非常简单的事情我忽略了，但我无法弄清楚是什么。谷歌搜索也没有返回任何有用的东西。

Answer 1

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日 看到人们仍然从谷歌进来，我觉得最初的答案可能会有所改善

• 更改了代码块，以提供 解决方案
• 将缩进单位更改为em的
• 每个属性都应用于ul元素
• 好评：）

Answer 2

这是一个很好的example -

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