続：dlのdt・dd　横並びレイアウト（1・基本形）

CSS

※11/13 掲載していた方法が適用されない場合があったため、回避策を修正しました。申し訳ございません。

dlのdt・dd 横並びレイアウト - Web & Design Creation notes+++のページビューがこの日記の中では割と高い。
が、今読むと適当すぎる。
なので、何とかしてまとめ直します。

  • 続：dlのdt・dd　横並びレイアウト（2・背景色をつける）comming soon!
  • 続：dlのdt・dd　横並びレイアウト（3・枠線をつける）comming soon!

基本

（HTML 4.01 標準モード、互換モード共通）

CSS

※head要素内にstyle要素として記述した場合

<style type="text/css">
<!--
dl{
	}
dt{
	width:5.5em; /* dtの文字量に合わせて調整。ddのmargin-leftと同じにする */
	float:left;
	clear:both;
	}
dd{
	margin-left:5.5em; /* dtの文字量に合わせて調整。dtのwidthと同じにする */
	}

    

  • 

      

    • >
      • 

    • 

</style>
<!--[if IE]>
<style type="text/css">
dd{
	height:1px; /* IE6 横位置のずれを回避 */
	}
</style>
<![endif]-->
HTML
<dl>
<dt>■dt</dt>
<dd>□dd<br>□dd<br>□dd<br>□dd</dd>
<dt>■dt<br>■dt<br>■dt<br>■dt</dt>
<dd>□dd</dd>
</dl>
確認済ブラウザ

※キャプチャは互換モード。標準モードでも同じ*1です。

WinXP Pro SP2 + FireFox3.0.3
WinXP Pro SP2 + InternetExplorer6.0
WinXP Pro SP2 + Safari3.1.2
MacOS10.3.9 + Safari1.2
MacOS9.2 + InternetExplorer5.1
解説

基本的に、dtの width、float:left、clear:both; と ddの margin-left で実現できます。
dtのwidth <= ddのmargin-leftにします。
ただ、これだけだとWinIE6はddの文字位置がなんかずれます。　→キャプチャ
そこでddにheightを付加すれば、回避できます。（追記：※autoは無効）
ただし、ddのheightはFirefoxやSafariの互換モード(訂正。FxやSafariの互換モードって何…)で表示が崩れるので
次にあげる方法で、ddのheightはWinIEのみに適用されるようにします。

  1. CSSハック（スターハック等）
  2. <!--[if IE]>〜<![endif]-->　　…など

*1:FFxとSafariはdlのmarginのデフォルトが異なるので、見た目は同じにはなりません。横並びだけ見ると同じです。