何かと便利な定義リスト。
用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。
しかし、中々思うように横並びが出来ないのが定義リスト。

今回はそんな厄介な定義リストのサンプルを作ってみました。

---

まずはスタイルシート。

dl {
 border:1px solid #999;
 width:390px;
}
dt {
 float:left;
 width:100px;
 padding:5px 0 5px 10px;
 clear:both;
 font-weight:bold;
}
dd {
 width:260px;
 margin-left:100px;
 padding:5px 5px 5px 10px;
 border-left:1px solid #999;
}

こんな感じです。
そして、実際の画面では↓こんな感じで表示されると思います。

もっとテーブルっぽく見せたり色々出来ますが、dl dt dd はホント厄介で言う事をきいてくれません。
今回のサンプルでは、dtの方がテキスト量が多くなった場合、ボーダーが途切れたりします。

ホントはcompact属性が使えればいいんですが、非推奨となっておりますのであまりオススメできる方法ではありません。
気合いでコンパクトに見せるしかないですね。

追々横並びの他のサンプルも作っていきたいと思います。