我正在尝试在列表项中创建一个液体 3 列区域。为此，我使用了包含 3 个元素的标准方法，其中前两个是边，左右浮动，第三个是内容，应该位于两者之间。以下 HTML 在 Firefox 中运行良好，但在 IE7 中无法正确呈现 - 内容呈现在两个 float 元素下方。知道问题出在哪里吗？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*
{
margin: 0;
padding: 0;
border: 0;
}
span
{
display:block;
}
.corner
{
width: 12px;
height: 12px;
}
.tl
{
float: left;
}
.tr
{
float: right;
}
.fill
{
margin: 0px 12px;
}
</style>
</head>
<body>
<ul>
<li>
<span class="tl corner">a</span>
<span class="tr corner">b</span>
<span class="fill">text text text</span>
</li>
</ul>
</body>
</html>
请注意，将 span 替换为 div 会产生相同的效果。我也尝试过各种 DocTypes 但没有成功。它在列表之外工作正常，因此问题似乎是使用列表所固有的。
最佳答案
在 IE 中，你试图一个接一个地挤进一行，但前两个已经占据了他们的空间，飘走了，这让 LI 中的最后一个 SPAN 为下一个而战级别，在 IE 中看起来像下面的下一个级别。
由于最后一个 SPAN 没有 float ，这也是它被推到下一个级别的原因。
此外，SPAN 是内联样式，而不是 block 级元素。如果您仍想尝试在 LI 元素中设置样式，则应将 SPAN 替换为 DIV。
您还应该使用完整的 DOCTYPE，以便浏览器知道如何呈现页面。否则他们将默认为怪癖模式，丑陋且无处不在。
但更好的策略是在 LI 之外和 DIV 设置中创建这个 3 列的 float 。
阅读 CSSplay或 Max Design关于创建 3 列布局。
关于html - 无法使 3 列布局在 IE7 的列表中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/610401/