質問: リストタグを用いた段組みメニューの不具合(ie6) 数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 ie6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 ### テスト1 * ・あ * ・い * ・う ### テスト2 * ・あ * ・い * ・う ### テスト1 * ・あ * ・い * ・う ### テスト2 * ・あ * ・い * ・う 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。
回答: no.1さんと言うとおり div.test ul li { width: 220px; display:inline; } width:220px;は必要ありません。 liのwidthが220pxで ulのwidthも220pxなら収まりませんよね。 表示がおかしい時に div.test ul li { width: 220px; display:inline; border:solid 1px; } ボーダーを入れて見た方が何が問題なのかわかりやすくなります。