html - li 中的第二行在 CSS-reset 之后从元素符号下方开始

Question

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

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

有点难以解释，但如果你看一下示例图像。左图是今天的名单。 “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 元素
• 好评:)