如何在 IE 7 中正确清除它？

Question

我有一个带有一系列 p 标签的 div 容器。每个 p 标签都会向左浮动。 我想要每行两个 p 标签，所以想想字段/值。

标题：一些标题
作者：一些作者

 <div id="container">
  <p class="field">Title</p><p>Some Title</p>
  <p class="field">Author</p><p>Some Author</p>
 </div>

如果我将“字段”类设置为 clear: both，我可以在除 IE 7 之外的大多数浏览器中获得所需的功能（不担心

标题：一些标题作者：
某作​​者

一些想法：

1. 我可以监控包含的 div 的宽度，这样只有两个 p 标签可以放在一条线上，但这似乎很脆弱。
2. 我可以通过在每两个 p 标签后放置一个清除 div 来混淆标记。它会起作用，但会让我觉得内心很脏。

我该如何克服这个问题？

Answer 1

使用此模式（span 是可选的 - 如果需要，可用于附加样式）。列表比重新使用错误的标签更有意义。这是一个列表。 :)

<ul>
    <li><label>Title</label><span>Some Title</span></li>
     ...
</ul>

CSS：

ul, li {
    padding:0;
    margin:0;
    list-style-type:none
}  

li {
   clear:both
}

label {
   float:left;
   width:150px;
}

Answer 2

http://jsfiddle.net/QUL9v/1/

使用 p 标签....

<div id="container">
    <p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
    <p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>

用css：

.field {
    float: left;
}

.clear {
    clear: both;
}

这只是坚持使用 p 标签。就个人而言，这就是我将如何完成它（http://jsfiddle.net/QUL9v/3/）：

<div id="container">
    <div class="field">Title</div>
    <div class="field">Some Title</div>
    <div class="clear"></div>
</div>
<div id="container">
    <div class="field">Author</div>
    <div class="field">Some Author</div>
    <div class="clear"></div>
</div>

我推荐这个的唯一原因是因为这更像是一个布局问题，我觉得使用 div 而不是 p 元素更自然。此外，无论您在 div 中放置什么（锚点、表单、表格等），它都会确保文本的位置。

您应该注意的另一件事是我使用 clear 作为最后一个兄弟而不是第一个（如您的示例中所示）。如果你正在清理前面；那么它可能是因为你的尾随元素是浮动的和内联的，你可能会在路上遇到错误，尤其是在 IE7 中。很多时候，浮动规则会传递给您从未打算或认为会传递给的元素。最后清除可确保不会发生这种情况。