gpt4 book ai didi

html - CSS div block 导致 WebKit 浏览器上的列表错位

转载 作者:太空宇宙 更新时间:2023-11-04 04:33:50 24 4
gpt4 key购买 nike

我正在使用 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 block 中没有任何文本,它看起来很好。我把它复制到JS Fiddle , 但效果更奇怪。

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

谢谢。

最佳答案

  1. 使用 <span>而不是 <div> .
  2. 删除 float:left来自你的 CSS。

另外,您不应该有多个具有相同 ID 的元素。请改用类。

您可以在此处查看修复:http://jsfiddle.net/g29dz/

关于html - CSS div block 导致 WebKit 浏览器上的列表错位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16741284/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com