80

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

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

有点难以解释，但是如果您查看示例图像。左图是今天的清单。“motta varsel [...]”从项目符号下方开始，但我希望它看起来像右边的图片。

我怎样才能用 CSS 做到这一点？我认为我忽略了一些非常简单的事情，但我不知道是什么。谷歌搜索也没有返回任何有用的东西。

在此处输入图像描述

4

3 回答 3

174

该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
  • 每个属性都应用于ul元素
  • 好评论：）
于 2012-07-19T08:13:33.857 回答
38

这是一个很好的例子——

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

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

于 2012-07-19T08:10:09.120 回答
22

我支持 Dipaks 的回答，但通常只有文本缩进就足够了，因为您可能/可能不会定位 ul 以获得更好的布局控制。

ul li{
text-indent: -1em;
}
于 2013-09-21T16:43:10.800 回答