Html 列表的跨浏览器兼容悬挂缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17556496/
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
Cross Browser Compatible Hanging Indent for Lists
提问by Austin
I have an unordered list where I'm trying to control the hanging indent. On items that overflow onto two lines, I want the second line of text to line up directly under the previous line of text (not underneath the bullet point). I've got this to work in Chrome exactly the way I want it. However it's a little off in Firefox and Internet Explorer.
我有一个无序列表，我试图在其中控制悬挂缩进。在溢出到两行的项目上，我希望第二行文本直接排列在前一行文本下方（而不是项目符号下方）。我让它在 Chrome 中完全按照我想要的方式工作。然而，它在 Firefox 和 Internet Explorer 中有点偏离。
Here's what I currently have:
这是我目前拥有的：
<ul style="list-style: disc inside none; margin-left: 0; padding-left: 1em; text-indent: -1em;">
<li>50 – 180</li>
<li>950 – 2150</li>
<li>Dual IF: 70/140, L-Band & L-Band monitor (standard)</li>
</ul>
Is there any way to make this render the same in all browsers?
有没有办法让这个渲染在所有浏览器中都一样？
回答by Natalie Banegas
Remove text-indent, change list-styleto outside, and apply a padding-leftto your lielements:
删除text-indent、更改list-style为outside并将 apadding-left应用于您的li元素：
ul {
list-style: disc outside none;
margin-left: 0;
padding-left: 1em;
}
li {
padding-left: 1em;
}
回答by Elliott de Launay
The only thing I had to add to the accepted answer was text-indent since I was using fontello bullets:
由于我使用的是 fontello 项目符号，因此我必须添加到接受的答案中的唯一内容是文本缩进：
ul {
list-style: disc outside none;
margin-left: 0;
padding-left: 1em;
text-indent: -2em;
}
li{
padding-left: 1em;
}
回答by Diodeus - James MacFarlane
Use a CSS reset first, then adjust your CSS accordingly.
首先使用CSS 重置，然后相应地调整您的 CSS。
