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

Question

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

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

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

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

原文由 OptimusCrime 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 元素
• 好的评论:)

原文由 Tim S. 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个很好的 例子-

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

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

原文由 Dipak 发布，翻译遵循 CC BY-SA 3.0 许可协议