【CSS】 dl で float を使う | バシャログ。
サイトトップページのニュースリリースなどで、dlによるfloatはよく使用してます。 昔はtableタグを使用して実現していましたが、「表組み以外でtableタグは使用しない」ことにしています。 WEB標準に順ずるシーブレインの取り組みです。 今回は、dtに日付、ddにニュースタイトルの場合を例としてご紹介します。 サンプルはシーブレインサイトトップページの以下の部分。 htmlタグは以下です。 htmlタグ <dl> <dt>2007-02-20</dt> <dd>辞典機能つきフィードリーダー『G10 Reader』運用開始</dd> <dt>2006-06-30</dt> <dd>マニュアル作成ページをリニューアルしました。</dd> </dl> CSS設定方法 dl dt { float: left; width: 5em; margin: 0 0 0.5em 0; padding:
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
