Question

我使用PHP生成列表，当列表项需要更多工作时，我在文本的左侧放置了一个红色粗体感叹号。但是在WebKit浏览器中，带有感叹号的项目会略微缩进，如下所示：

项目
项
- ！项目

这是一个产生同样问题的HTML示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1" />
<style>
#needswork {
        color:#F00;
        font-weight:bold;
        float:left;
}
</style>
<title>Dodgy lists</title>
</head>
<ul>
<li><a href="http://www.linuxtech.ie"><em>Atlanta</em> - 24 May</a></li>
<li><div id="needswork"></div><a title="Still needs work" href="http://www.linuxtech.ie"><em>Ashgabat</em> - 2 Feb</a></li>
<li><div id="needswork">!</div><a title="Still needs work" href="http://www.linuxtech.ie"><em>Paris</em> - 3 June</a></li>
</ul>
</html>

请注意，列表中的第二项在div块中没有任何文本，看起来很好。我把它复制到了JS Fiddle，但效果更加陌生。

我尝试使用来自http://meyerweb.com的CSS重置，但它没有任何区别。

感谢。

Answer 1

使用<span>代替<div>。
从CSS中删除float:left。

此外，您不应该有多个具有相同ID的元素。改为使用班级。

您可以在此处看到此修复程序：http://jsfiddle.net/g29dz/

CSS div块导致WebKit浏览器上的列表错位

1 个答案: