エンジニアブログ

RSS

定義リストを横並びに配置

tweets master

こんにちは、コーディング工房です。

今回は定義リストの<dl><dt><dl>タグを横並びにしていく方法を述べたいと思います。

 <HTML>

 <div id=”example”>
<dl>
 <dt>2011.05.15</dt>
 <dd>只今此処</dd>
</dl>
<dl>
 <dt>2011.05.15</dt>
 <dd>只今此処</dd>
</dl>
<dl>
 <dt>2011.05.15</dt>
 <dd>只今此処</dd>
</dl>
 </div>

 

<dt>は見出し、<dd>は内容、として縦に並んでいます。なので、スタイルシートで平行にしていきます。

 

 <css>


#example dl {
 border-bottom:1px solid #000;
}
#example dt {
 padding:10px 0 10px 10px;
}
#example dd {
 margin-top: -26px;
 margin-left:90px;
}

ここまでは、簡単に横並びに配置できます。但し、各ブラウザによって、margin、paddingの解釈が異なりますので、
事前にリセットをしておきます。また、cssは上部に記述されたタグから読み込みますので、リセットは最上部に記述します。

 <css>

 /* reset */
* {
font-size: 100%;
font-weight: normal;
margin: 0;
padding: 0;
text-align:left;
}
 
dl,dt,dd {
border: 0;
border-spacing: 0px;
border-collapse: collapse;
font-weight:normal;
text-decoration:none;
line-height:100%;
list-style-type:none;
text-indent:0px;
}

これで均等なレイアウトになりました。

ところが、IE6では下線との間に余白が生じてしまいました。IE6は指定したmarginやpaddingの数値を異なった解釈をするようです。
なので、スタイルシートにハックタグ「_」を入れてIE6に合わせた幅の指定をしていきます。

 <css>

#example dt {
 padding:10px 0 10px 10px;
 _padding: 10px 0 0 10px;
}
#example dd {
 margin-top: -26px;
 margin-left:90px;
 _margin: -15px 0 0 90px;
}

 
あまり相違のないレイアウトになったのではないでしょうか?
当然、ページそのもののレイアウトや画像を入れることで、上記の幅の数値は異なります。