2012年2月22日水曜日

cssで定義リストを横並びに表示するベストな方法

これまで余り触ったことのなかったdl-dt-dd要素を弄ってみた.そんでもってcssによるレイアウトの調整をどうすりゃいいかずっと悩んでいたのだけれど,良さ気なパターンが作れたので公開してみる.正直自分だけじゃ解決できんかった.
→つーか,黄金パターンってのが本当に作りにくい.いろんな所でレイアウトに苦労しているのがよく分かった.下のパターンも可変幅には対応していないし…
    特徴
  • 幅の調整だけで良い.但し可変幅には未対応.
    dd要素を可変幅にするパターンもある.(float:rightを殺してmargin-leftを設定する)
    絶賛混乱中
  • dt-dd要素の高さは気にしなくて良い.勝手に上辺が揃う.
    高さが揃うだけなので,背景を挿入すると空白が入ってしまう.
    (必要に応じheightを設定すればよいか.)
  • 真ん中のborderを重ねているので,styleがdashed,dottedについては上手く行かない. 
  • 必ずdt-ddを交互に配置すること.さもないと位置がずれてしまう.
    要素を連続させてもhtml5のシンタックス上は問題ないのだけれど…
    素直に要素の中身を複数行に分けて下さい.
今のままでも1:nの表示は出来るんだけれど,dtが連続している場合は見た目が悪い.というか,cssで見た目の調整をしにくい構造なので,floatを使ったパズルとしては優秀なんだけれど,考えれば考えるほどこんがらがってくる.



    #list{
     font-size:0.8em;
     width:400px;
     border-top:solid 1px black;
     border-bottom:solid 2px black;
     margin:0;
    }
    #list>dt,#list>dd{
     padding:0;
     margin:0;
     border-top:solid 1px black;
    }
    #list>dt{
     width:139px;/*borderの分縮める*/
     float:left;
     clear:both;
     text-align:right;
     font-weight:bold;
     padding-right:10px;
     border-right:solid 1px black;
    }
    #list>dd{
     width:240px;
     float:right;
     padding-left:10px;
     border-left:solid 1px black;
     margin-left:-1px;/*borderの分左にずらす…borderを重ねる*/
    }
    
    /*clear fix*/
    #list:after{
     display:block;
     clear:both;
     content:".";
     color:transparent;
     height:0;
     width:0;
    }

    0 件のコメント:

    コメントを投稿