2007年05月17日
dl,dt,ddでシンプルな横並びを表現する
以前書いていたエントリーなのですがバックアップを取っておらず、データの移行が難しいので少しずつ昔のデータを編集しながら再エントリーしていきたいと思います。CSSの記述にも昔のエントリーを見ると間違えている部分が多いので修正できるチャンスでもあるわけです。というわけで過去に書いたdl,dt,ddで綺横並びを再エントリー。
基本といえば基本の定義リストである「dl,dt,dd」を利用しての単純なリストを作ってみます。
<dl class="list">
<dt>名前</dt>
<dd>ヤマナカヅオ</dd>
<dt>性別</dt>
<dd>男性</dd>
<dt>年齢</dt>
<dd>52歳</dd>
<dt>趣味</dt>
<dd>カメラとネットサーフィン以外特に・・・</dd>
</dl>
dl.list {
border-top: 1px solid #ccc;
line-height: 1.6;
margin: 2em 0;
width: 60%;
}
dl.list dt {
background: url(img/arrow.gif) no-repeat left center;
width: 5em;
float: left;
padding-bottom: 1px;
text-indent: 1em;
}
dl.list dd {
padding-left: 5em;
border-bottom: 1px solid #ccc;
}
ポイント部分解説
- dt部分のpadding-bottom: 1px;はddにボーダー1pxがあるためボーダー幅と同じだけ取る必要がある。これをしないと微妙なズレが生じてくる。
- texi-indent: 1em;はpaddingとwidthを同時に使用しないため、今回のサンプルのように左の項目にワンポイントの画像を使用したい場合などは、paddingではなくtext-indentで左部分をあけるようにします
- dd部分のpadding-left: 5em;はdtの余白と同じ値だけpaddingで取るようにする。marginで余白を取るとボーダーが面倒なので･･･。
うぅ、久しぶりにこういう記事書いたけどめっちゃしんどい、しかも基本的なことだけでこんな時間かかったかな？まぁ新しいネタに食いつけば興味本位で頭が動くはずなのでしばらくは過去のエントリー復活を続けたいと思います。次回はこれらのリスト表示にもう少しデザインを加えて表示したいと思います。
コメント (2)
-
dlを使った横並びを探しているうちにここに辿りつきました。
上記のソースだとdt部が1行の場合、dd部が3行以上になると
dd部がずれちゃいますね。 -
遅レスですいません。
この問題がなければ完璧なんですけどね～。dd部がずれる問題はIE6のバグなのでどうしようもないと思って放置しています。ただし下記のアドレスのようにアンダースコアハックで無理矢理解決する方法もあります。