Html CSS 重置后，li 中的第二行从项目符号下方开始
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11556493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Second line in li starts under the bullet after CSS-reset
提问by OptimusCrime
I'm having some problems with my ul-list after using applying CSS-reset.
ul使用应用 CSS-reset 后，我的-list出现了一些问题。
When the text in the liis long and it breaks to a second line, the text begins under the bullet. I'd like it to start with the same margin/padding as the text on the right side of the bullet.
当 中的文本li很长并中断到第二行时，文本将从项目符号下方开始。我希望它以与项目符号右侧的文本相同的边距/填充开始。
Sort of hard to explain, but if you look at the example-image. The left-image is the list today. "motta varsel [...]" begins under the bullet, but I'd like it to look the the picture on the right.
有点难以解释，但是如果您查看示例图像。左图是今天的名单。“motta varsel [...]”从项目符号下方开始，但我希望它看起来像右边的图片。
How can I do this with CSS? I assume there is something very simple I've overlooked, but I can't figure out what. Google searches did not return anything useful either.
我怎样才能用 CSS 做到这一点？我认为我忽略了一些非常简单的事情，但我无法弄清楚是什么。Google 搜索也没有返回任何有用的信息。
回答by Tim S.
The litag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it's set to inside. That makes your text wrap around it. If you set it to outside, the text of your litags will be aligned.
该li标签有一个名为 的属性list-style-position。这使您的项目符号在列表之内或之外。默认情况下，它设置为inside. 这使您的文本环绕它。如果将其设置为outside，则li标签的文本将对齐。
The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.
这样做的缺点是您的项目符号不会与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;
}
Edit 15th of March, 2014Seeing people are still coming in from Google, I felt like the original answer could use some improvement
编辑 2014 年 3 月 15 日看到人们仍然从谷歌进来，我觉得原来的答案可以使用一些改进
- Changed the code block to provide justthe solution
- Changed the indentation unit to
em's - Each property is applied to the
ulelement - Good comments :)
- 改变了代码块，以提供正好溶液
- 将缩进单位更改为
em's - 每个属性都应用于
ul元素 - 好评论:)
回答by Dipak
Here is a good example-
这是一个很好的例子——
ul li{
list-style-type: disc;
list-style-position: inside;
padding: 10px 0 10px 20px;
text-indent: -1em;
}
Working Demo: http://jsfiddle.net/d9VNk/
工作演示：http: //jsfiddle.net/d9VNk/
回答by Rajesh Rajan
I second Dipaks' answer, but often just the text-indent is enough as you may/maynot be positioning the ul for better layout control.
我支持 Dipaks 的回答，但通常只有文本缩进就足够了，因为您可能/可能不会定位 ul 以获得更好的布局控制。
ul li{
text-indent: -1em;
}
