在使用应用 CSS-reset 后,我的 ul
-list 出现了一些问题。
当 li
中的文本很长并且中断到第二行时,文本从元素符号下方开始。我希望它以与元素符号右侧文本相同的边距/填充开始。
有点难以解释,但如果你看一下示例图像。左图是今天的名单。 “motta varsel [...]”从元素符号下方开始,但我希望它看起来像右边的图片。
我如何使用 CSS 做到这一点?我想我忽略了一些非常简单的东西,但我不知道是什么。谷歌搜索也没有返回任何有用的信息。
最佳答案
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
元素 - 好评:)
关于html - li 中的第二行在 CSS-reset 之后从元素符号下方开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30246145/