スタイルシンプルなキーと値のセットとしてdefinititionリスト

StackOverflow https://stackoverflow.com/questions/1577368

  •  21-09-2019
  •  | 
  •  

質問

私のようにシンプルに定義リストを使用したいと思います：

<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>

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

編集明確にする：

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

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

は動作しません。 

name: Tomas
address: this is a very long
         wrapping address
age: 29
これらの複数行フィールドは、スペースを保持するために行の先頭にラップする必要があること

のデザインを指定します。

役に立ちましたか？

解決

私はこれが仕事だと思う。

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の表は、ここでは、意味的に許容可能なソリューションである - それは、のあるの表形式のデータ

。

他のヒント

あなただけそうのような前の要素の左にDDを浮く可能性があります。

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

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

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

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

dt { float: left; }

DT表示をインラインでみましょうか、他ます：

dt { display: inline; }

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

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

私が思うに、この（小さな幅のためのテストへのコメントを外し、最初の行）：

dl, dd, dt { margin: 0; }
/*dl { width: 80px; }*/
dl dt, dl dd { display: inline; }
dl dd:after { content: ' '; padding-left: 100%; }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top