29

我有一个无序列表，我试图控制悬挂缩进。在溢出到两行的项目上，我希望第二行文本直接排列在前一行文本的下方（而不是在项目符号下方）。我已经完全按照我想要的方式在 Chrome 中工作了。然而，它在 Firefox 和 Internet Explorer 中有点偏离。

这是我目前拥有的：

<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>

有没有办法让所有浏览器中的渲染都一样？

4

3 回答 3

39

删除text-indent、更改list-style为outside并将 apadding-left应用于您的li元素：

ul {
    list-style: disc outside none; 
    margin-left: 0; 
    padding-left: 1em;
}
li {
    padding-left: 1em;
}
于 2013-07-09T19:55:54.923 回答
2

我唯一需要添加到接受的答案是文本缩进，因为我使用的是 fontello 项目符号：

ul {
    list-style: disc outside none;
    margin-left: 0; 
    padding-left: 1em;
    text-indent: -2em;
}

li{
    padding-left: 1em;
}
于 2015-01-09T22:25:28.400 回答
0

首先使用CSS 重置，然后相应地调整您的 CSS。

于 2013-07-09T19:27:54.640 回答