我有以下 HTML 测试页:
<!DOCTYPE html>
<html>
<head>
<title>Position Break</title>
<style type="text/css">
section {
position: relative;
width: 100%
}
li {
display: inline;
}
#list_two {
position: absolute;
top:0;
width:100%;
}
</style>
</head>
<body>
<section>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
<section>
<ul id="list_two">
<li>Item One</li>
<li>Item Two</li>
</ul>
</section>
</body>
</html>
(对我而言)预期的输出是:
Item One Item Two
Item One Item Two
即两个列表都应内嵌显示。这是在 Chrome (8) 和 Safari (5.0.3) 中观察到的输出，但 Opera (10.10) 和 Firefox (3.6) 都会产生意外输出:
Item One Item Two
Item
One
Item
Two
我试过定位包含部分元素而不是 ul。我已经尝试在 DOM 的每一步都分配明确的宽度和高度值，但无济于事——我似乎无法找到将在 Firefox/Opera 中获得 Chrome/Safari 行为的组合。怎么做到的？
TIA!
最佳答案
将 display: block; 添加到 section {..}
关于css - 绝对定位 ul 会在 Firefox 和 Opera 中导致奇怪的空白环绕问题。如何解决？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4648323/