dt と dd を横に並べる CSS はじめてのブログデザイン
今日は定義リスト（dl タグ）内の dt と dd タグを CSS で横に並べる方法です。 いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて？』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。 定義リストの要素 dt と dd を CSS で横に並べる方法は幾つかあるのですが、私が最も使用している方法を記述しておきます。 dt { float : left; width : 10em; } dd { margin-left : 10em; } まず dt を float させつつ width を指定。上のサンプルソースの様に em で指定するとユーザーにテキストサイズを変更されても追従します。 ちなみに 10em は font-size が 12px なら 120px となります。つまり font-size で指定されている大きさを 1
Webfactory : Weblog : 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
