0

ラベルと定義のペアを並べて表示したい定義リストがあります。

次のコードは、最近のすべてのブラウザで正しく機能します。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>
4

2 に答える 2

1

追加

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

あなたのCSSに。

http://jsfiddle.net/FFMvY/1/を参照してください

于 2012-12-11T22:43:28.857 に答える
0

/ペアごとに削除floatするDDか、独自のセルフクリアを使用します。ところで、2番目のケースでは、の代わりに使用するのがおそらく理にかなっています。DLDTDDdisplay: tablefloat

于 2012-12-11T22:30:46.707 に答える