人気ブログランキング | 話題のタグを見る
(HTML)ul(リスト)を使って4列横並びにする
(HTML)定義リスト(dl,dt,dd)で2列横並びにするで、2列の場合の表を定義リストで表現する方法を書きました。

今回は ul 要素を使って複数列の場合を試してみたいと思います。

完成形は下記のような感じです。
(HTML)ul(リスト)を使って4列横並びにする_e0091163_04736.jpg


1行目は2列。2行目以降は4列といった感じにします。

まず、HTMLはこんな感じです。
<ul>
<div class="li_float">
<li class="left">項目1</li>
<li class="cl2_right">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ</li>
</div>
 
<div class="li_float">
<li class="left">項目2</li>
<li class="float">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ </li>
<li class="float_title">項目3</dd>
<li class="right"><input type="text" size="16" maxlength="16" ></dd>
</div>
 
<div class="li_float">
<li class="left">項目4</li>
<li class="float">0<input type="text" size="16" maxlength="16" ></dd>
<li class="float_title">項目5</dd>
<li class="right">ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨピヨ ホゲホゲ ピヨ</dd>
</div>
</ul>



次に,CSSはこんな感じです。
ul {
list-style:none;
padding : 5px;
}
 
/*左端にくる項目名*/
li.left {
clear: left;
float: left; /*liを横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
}
 
/*2列目*/
li.float {
margin-bottom: 0.8em;
float: left; /*liを横並びにするため、回りこみ許可*/
margin-left:2px;
width: 15em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
 
}
 
/*3列目 項目名列*/
li.float_title{
float: left; /*li横並びにするため、回りこみ許可*/
margin: 0 0 0.8em;
width: 7em; /*この幅の後に次のli要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/
border-left: solid 12px #CCC; /*左に罫線描画*/
padding-left: 5px;
 
}
/*4列目(右端)*/
li.right {
width: 15em
margin-bottom: 0.8em;
margin-left: 31em; /*この値は各列のwidthの計+2*/
}
 
/*2列の場合の右側の列*/
li.cl2_right {
margin-bottom: 0.8em;
margin-left: 7em;
}
 
/*これを指定しないと、折り返し文字がある場合、各列の上下位置がずれる*/
div.li_float{
clear: left; /*各行毎に回り込み解除*/
}


IE6だと上手く表示できませんでした。
また、IE8の場合、上記例の "項目4" のテキストボックスが何故かセンタリングされて表示されてしまいます。テキストボックスの前に何かの文字を入れれば問題有りませんでした。

罫線を引いて表形式にすることも試みましたが、どうやら難しそうです。


なかなかCSSに苦労させられている3流PGです。。。
by Jehoshaphat | 2012-06-26 00:47 | Webがらみ


<< (HTML)Niceforms... (HTML)定義リスト(dl,... >>