html - 如何在 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 之外的大多数浏览器中获得所需的功能(不用担心 < 7)。然而，在 IE 7 中，如果包含的 div 足够宽，则 clear: both 似乎都被忽略了，我会得到这样的东西:

标题:一些标题作者:
一些作者

几个想法:

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;
}