li中的第二行在CSS-reset之后的项目符号下开始

Question

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

当li中的文本很长并换到第二行时，文本将在项目符号下开始。我希望它以与项目符号右侧的文本相同的页边距/填充开始。

有点难以解释，但如果你看一下示例-图像。左图是今天的列表。“莫塔·瓦塞尔...”从子弹下面开始，但我想让它看起来像右边的图片。

我如何使用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’s

• Each属性 ul

• Good comments :)

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