Question

我有一个定义列表，我想要显示标签/定义对彼此相邻。

以下代码适用于所有现代浏览器。我试图让它在IE7中工作，但dd值不尊重之前清除的dt。我还需要做些什么来让它们像在chrome或ff中一样堆叠。

<style type="text/css">
   .label-value-list {
    }
   .label-value-list dt {
      float: left;
      clear: left;
      width: 100px;
   }
   .label-value-list dd {                           
      float: left;
   }
</style>

<dl class="label-value-list">
   <dt>First Label</dt>
   <dd>This is the first value</dd>

   <dt>Second Label</dt>
   <dd>I should be below the first value<br/>and I have two lines</dd>

   <dt>Third Label</dt>
   <dd>I should be below the second value</dd>
</dl>

Answer 1

添加

*:first-child+html .label-value-list dd {
   float: none;
   display: inline-block;
}

到您的CSS。

请参阅http://jsfiddle.net/FFMvY/1/

Answer 2

从float移除DD或为每个DL / DT对使用自行清除DD。顺便说一句，在第二种情况下，使用display: table代替float可能是有意义的。

IE7浮动清除定义列表

2 个答案: