CSSでかなりハマったのでメモ。
まず、作りたいものはこれ↓
一番外のul要素の外にはdivがあるというかなり複雑な構造。
試行錯誤の結果、このような構造になってしまった。
ピンクのul以下は横に可変するデータ。
構造を簡単に解説。
・ピンクのulはfloat:leftをかけている
・ピンクの中のli要素に対してもfloat:leftをかけている
・可変するピンクのul要素を一塊と考え、それをul-liでまとめている
いちばん問題だったのは、横に可変するということ。
一番外のulに対してdisplay:inline-blockをかけて、margin:autoをしてやれば万事うまくいくのだが、display:inline-blockはIE6,IE7で対応していないのでNG。
ここでinline-blockを簡単に説明します。
・CSS 2.1 で追加された display プロパティに指定できる値
・ブロック要素のように横幅/高さを指定できて、インライン要素のように改行されることなく同じ行内に並ぶ。
CSS 2.1 の仕様書には、”inline-block を指定された要素は置換要素と類似した振る舞いをする”という内容も書かれている。
inline-blockはIE 6, 7 では基本的に対応していないが、a や span など、インラインレベルの要素に対してのみ対応している。
ただし、特殊な方法を使うことで、ブロックレベルの要素に対しても使うことができる。
結論から言うと、以下のように指定してやるとうまく行った。
いちばん外のdiv{
text-align:center;
display:inline-block;
}いちばん外のul{
display:inline:
text-align:center;
zoom:1;
}
結局、偶然うまくいっただけで、根本はよくわからないのが現状だったり・・・。
まだまだです。