Home > 実践 Web Standards Design p.366

実践 Web Standards Design p.366

Last Modified: 2008年11月30日 11:08

このページは、実践 Web Standards Design が第 1 刷・第 2 刷から第 3 刷となる際に、仕様自体の変更によって内容を修正した分について公開しています。

戻る：サポートページトップ
前： p.354

15 定義リストのdtとddを横並びさせる

floatを使った方法

dt {
    float: left;
    width: 5em;
}

dd {
    margin-left: 5em;
}

dtをフロートさせてddを右に回り込ませます。フロートさせるdt要素の幅を5emと指定し、同値をdd要素のマージンに指定します。

floatで横並び

Column 非置換要素をフロートさせる場合

CSS2では、非置換要素をフロートさせる場合には、明示的な幅を持たなければいけない仕様になっていますが、CSS 2.1の仕様ではwidthの初期値であるautoの場合は内容に合わせた幅を計算（shrink-to-fit）するとなっています。

URL 10.3.5 Floating, non-replaced elements: http://www.w3.org/TR/CSS21/visudet.html#float-width

CSS 2.1の仕様を実装している最近のブラウザであれば、幅の指定をしなくても内容幅から計算して意図した通りに描画されるかもしれませんが、Mac版のIEなど、古いブラウザなどでは大幅に崩れてしまいます。また、CSS 2.1は勧告候補の状態なので、素直にCSS2に沿って指定しておいたほうがよいかもしれません。