跨浏览器兼容的列表悬挂缩进。

Question

跨浏览器兼容的列表悬挂缩进。

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>

有没有办法让这个在所有浏览器中都呈现相同的方式？

- Austin

3个回答

2

我需要补充的是，由于我使用了fontello弹出框，因此还需要添加text-indent属性：

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

li{
    padding-left: 1em;
}

- Elliott de Launay

1

文本意图对我有所帮助，但我的问题是如何为我的项目符号使用自定义图像。目前正在研究如何解决这个问题，因为我的一个li的第三行导致了缩进问题。 - dogonaroof

1

明白了。对我来说，我有一个带有三个li的ul，只有中间的li是较长的文本，而在Chrome响应式iphone5/SE中，第三行的li完全靠左而不与其他元素对齐。我为我的项目符号使用自定义勾选标记图像，因此无法尝试一些建议的答案。我给那个li加了一个类和padding-left: 30px;，这样就解决了问题。 - dogonaroof

-1

首先使用CSS重置, 然后根据需要调整你的CSS。

- Diodeus - James MacFarlane

谢谢提供的信息，应该可以用。不确定我什么时候有时间来实现它，但我喜欢这个想法。 - Austin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Natalie Banegas · Accepted Answer

移除 text-indent，将 list-style 改为 outside，并在你的 li 元素上应用 padding-left：

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