3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。(jehupc.exblog.jpから移転中)

(HTML)ul(リスト)を使って4列横並びにする

Webがらみ

(HTML)定義リスト(dl,dt,dd)で2列横並びにするで、2列の場合の表を定義リストで表現する方法を書きました。

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

完成形は下記のような感じです。

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

まず、HTMLはこんな感じです。

    

     class="li_float">
    

         class="left">項目1
    

         class="cl2_right">あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ

 

class="li_float">

class="left">項目2

class="float">ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　

class="float_title">項目3

class="right"> type="text" size="16" maxlength="16" >

 

class="li_float">

class="left">項目4

class="float">0 type="text" size="16" maxlength="16" >

class="float_title">項目5

class="right">ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ピヨ

次に,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です。。。