Question

我遇到类似于此处描述的问题（没有解决方案）：

以下HTML在Firefox中按预期呈现，但在IE7和IE8中均未呈现：

<html>
<head>
<style>
ul {
    list-style-type: none;
}
li {
    clear: both;
    padding: 5px;
}
.left {
    clear: left;
    float: left;
}
.middle {
    clear: none;
    float: left;
}
.right {
    clear: right;
    float: left;
}
</style>
</head>
<body>
<ul>
    <li>1</li>

    <li class="left">2</li>
    <li class="right">3</li>

    <li class="left">4</li>
    <li class="middle">5</li>
    <li class="right">6</li>

    <li>7</li>
</ul>
</body>
</html>

这是一种表单布局，在Firefox中，结果如下所示：

这就是我想要的。但是在IE7和IE8中，结果是：

[注意：我不想向右移动任何东西，因为我希望我的表单上的字段正确左对齐，在浮动字段之间没有巨大的空间来考虑父容器的宽度。

显然我需要一个完整的清晰，并且可能可以在列表中添加一个空的列表项元素以强制清除，但这似乎是一个愚蠢的解决方案，有点挫败了目的。

有什么想法吗？我花了几个小时阅读并尝试了不同的选择但没有成功。

Answer 1

试试这个，demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>list floats</title>
  <style type="text/css">
  li{clear: none;list-style: none}
  .clearer{float: left; clear: left}
  .floater{ float:left}
  </style>
</head>
<body>
<ul>
    <li class="">1</li>
    <li class="clearer">2</li>
    <li class="">3</li>
    <li class="clearer">4</li>
    <li class="floater">5</li>
    <li class="">6</li>
    <li class="clearer">7</li>
</ul>
</body>
</html>

Answer 2

您只需使用<br class="clear" />和br.clear{ clear: both; }

即可

Answer 3

我同意表格选项。但是，您可以使用空列表项执行此操作。这可以让你摆脱'右'和'中'类中的'clear'属性。你还需要一个单独项目的“独奏”课程，以确保它清除两种方式。

.clear {
    clear: both; 
    margin:0px;
    padding:0px ;
    font-size:1px;
}
.solo {
    clear: both; 
}

<li class="solo">1</li> 

<li class="left">2</li> 
<li class="right">3</li> 
<li class="clear"></li>

Answer 4

尝试以下代码。更简单但有点难以理解！

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li{list-style: none}
.float{ float:left}
</style>
</head>
<body>
<ul>
<li class="">1</li>
<li class="float">2</li>
<li class="">3</li>
<li class="float">4</li>
<li class="float">5</li>
<li class="">6</li>
<li class="float">7</li>
</ul>
</body>
</html>

IE7和IE8：浮动清除而不添加空元素

4 个答案: