html - 定義リストを単純なキー値セットとしてスタイル設定する

Question

次のような単純な定義リストを使用したいと思います。

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

次のようなものをレンダリングします。

name: Tomas
address: this is a very long
wrapping address
age: 29

ここでは、定義リストが意味的に最適なオプションのようです。

新しい慣らし表示スタイルを使用すると、うまくいきます。

<style> dt { display: run-in; } </style>

しかし、これはまだ広くサポートされていません。HTMLを変更せずに（現在、インライン表示を使用して醜いbrを追加する）、クロスブラウザサポートを改善するために定義リストのスタイルを設定するにはどうすればよいですか（ie6は必要ありません）？

明確にするために編集：

dt { clear: left; }
dd { float: left; }

次のようにレンダリングされるため、機能しません。

name: Tomas
address: this is a very long
         wrapping address
age: 29

設計では、スペースを確保するために、これらの複数行フィールドが行の先頭に折り返されるように指定されています。

score 8 · Accepted Answer

私はこれがうまくいくと思います：

dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 .5em 0 0;
}
dd {
  margin: 0;
  padding: 0;
}

便利なもう 1 つのオプションは、:after疑似クラスです。dt各要素のコロンをスキップして、次のようにすることができます。

dt:after {
  content: ":";
}

これにより、より柔軟になり、リストやウェブサイト全体でその文字を変更したり、必要に応じて削除したりできます.

あなたが言及したラッピングの問題を解決するには、要素dtとdd要素の両方に幅を設定する必要があります。または、th名前/アドレスなどとtd「データ」にテーブルを使用します。IMOテーブルは、ここでは意味的に受け入れられるソリューションです-それは表形式のデータです。

score 0 · Accepted Answer

単純に dt を float にすることもできます: left

dt { float: left; }

または、dt をインラインで表示させます。

dt { display: inline; }

score 0 · Accepted Answer

私はこれを考えます（小さな幅をテストするために最初の行のコメントを外します）：

dl, dd, dt { margin: 0; }
/*dl { width: 80px; }*/
dl dt, dl dd { display: inline; }
dl dd:after { content: ' '; padding-left: 100%; }

score 0 · Accepted Answer

そのように、前の要素の左側に dd をフロートすることができます。

dt { clear: left; }
dd { float: left; }

追加の配置のために、幅属性をどちらかに追加することもできます。

dt { clear: left; width: 20%; }
dd { float: left; }

score 0 · Accepted Answer

dd からデフォルトの左マージンを削除する必要があります。

dt {float:left;clear:left;margin-right:5px;}
dd {margin:0;}

5 に答える 5