スタイルdefinititionリストと簡単なキー値が

Question

を設定し、私のようにシンプルに定義リストを使用したい

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

を定義リストは、意味的に思えますここで最高のオプションです。

トリックを行います新しい実行中の表示スタイルを使用：

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

をしかし、これは広くまだサポートされていません。どのようにしてhtmlを変更することなく、より良いクロスブラウザサポート（6必要ない）のために私の定義リストをスタイルすることができますか（現在私はディスプレイのインラインを使用し、醜いbrを追加します）？

編集明確にする：デザインは、これらの複数行のフィールドを保存するには、行の先頭にラップする必要があることを指定し

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

：として、それがレンダリングされますので

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

が動作しません。スペース。

Answer 1

：

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

に有用である別のオプションは、:after疑似クラスです。あなたはdt要素のそれぞれにコロンをスキップして持つことができ：

dt:after { 
    content: ":"; 
} 

これはそれをより柔軟になり、あなたは全体のリストやウェブサイト全体でその文字を変更することができ、またはあなたのように感じた場合はそれを取り除きますそれ。

上記のラッピング問題を解決するには、dtとdd要素の両方に幅を設定する必要があります。または、名前/住所などの場合はth、「データ」の場合はtdの表を使用します。 IMOテーブルはここでは意味的に許容される解決策です - はです。

Answer 2

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

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

余分なアライメントのいずれかにwidth属性を追加することもできます。

私はこれが仕事だと思う

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

Answer 3

さて、あなたは、単にDTフロートを聞かせできます左

dt { float: left; } 

か、他聞かせdtの表示インライン：私はこの（コメント解除最初の行は、小さな幅をテストするために）考える

dt { display: inline; } 

Answer 4

：

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

Answer 5

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

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