3

DL幅300pxのコンテナに次のものがあります。

<style type="text/css">
dl {width: 300px}
dt {
  float:left;
  clear: left;
  width: 70px;
}
</style>
<dl>
  <dt>Row1</dt>
  <dd>Value1</dd>
  <dt>Row2</dt>
  <dd>Value2</dd>
  <dt>Row3 with longer title requiring line breaks</dt>
  <dd>Value 3</dd>
  <dt>Row4</dt>
  <dd>Value4</dd>
  <dt>Row5</dt>
  <dd>Value5.1</dd>
  <dd>Value5.2</dd>
  <dt>Row6</dt>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
  <dd>Value6.1</dd>
</dl>

アイテムをテーブルのように並べるにはどうすればよいですか。

  • 左のDT列にありDD、右の列に s があります
  • 行 X と値 X 上揃え
  • 互いの下にリストされた複数DDの (1 つの に対して)DT

ここ、ここ、ここに複数の関連する質問が見つかりましたが、どちらも異なる状況を上に揃えることができませんでした (DTよりも高くDD、複数DDの が よりも高いDT)。

4

2 に答える 2

2

Bootstrap を使用して DL を処理します。

ブートストラップの説明リスト

2 つのオプションがあり、好みに合わせてセットアップをカスタマイズすることもできます。ただの提案です。

.dl-horizontal:before,
.dl-horizontal:after {
    display: table;
    content: "";
    line-height: 0;
}
.dl-horizontal dt {
  float: left;
  width: 160px;
  clear: left;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 180px;
}

http://jsfiddle.net/rzWnG/1/

これは、水平方向の DL を作成するためにブートストラップが使用するものです。あなたが望むものをより良く見せるために、私はそれを少しモチーフにしました. 彼の JSfiddle の Explosion Pills html を使用しました。そのために、私は彼に賛成票を投じます。

これを試して。あなたが望んでいるものを正確に得るのにもう少し役立ちます。

于 2013-04-01T22:06:23.937 に答える