- 締切済み
firefoxだと２列で表示されてしまう。
よろしくお願いします。 div.base {width:100%;} .base ul { margin: 0px; padding: 0px 0px 3px 0px; list-style-type:none; } .base li { margin: 0px; padding: 2px 0px 5px 23px; width: 33%; float: left; } 上記のCSSを <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> のように書き込んでいるのですが、IEなどではうまく３列で表示されますがfirefoxの場合はなぜか２列に表示されてしまいます。 お分かりになる方、是非ご教授お願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- orc-orca
- ベストアンサー率68% (15/22)
実験した結果，IEでは，3列，firefoxでは2列になります．IEはCSSの解釈を正当に行なわないためです． 原因は No.1の方の指摘している通りです．右側に余白があるようにみえるのは，文字が左詰めされているからではないですか？ つまり，こういうことでは？ ------ <html> <style type="text/css"> div.base { width:100%; margin: auto; text-align: center; } .base ul { margin: 0px; list-style-type:none; } .base li { margin: 0px; width: 33%; float: left; } </style> <body> <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> </body> </html> ------
- partita
- ベストアンサー率29% (125/427)
＃１です。 ＞なぜか、私のIEでは３列に表示されています・・・ なぜだろう？ ＾＾； DOCTYPE宣言によるものかな？
- partita
- ベストアンサー率29% (125/427)
2列で表示されるほうが正しいと思います。 【根拠】 画面解像度が1024×768だとすると、 width=100%=1024px liを33%で3列に並べたいのならliだけで99%の領域を確保する必要があります。残り1%をmargin、paddingで使用できます。 しかし、liに左padding：23pxを適用しており、これは1%をオーバーしています。よって、2列に並びます。 画面解像度が1280でも同様です。 実際、ご提示いただいたソースをIEで見ても、2列表示にしかなりません。
お礼
partitaさん ありがとうございます。 なぜか、私のIEでは３列に表示されています・・・ liの左padding：10pxくらいにすると IEでもFireFoxでも３列に表示されるのですが、微妙にレイアウト（右側に余分な余白）がでてしまいます。 リストタグを使ってどちらも同じように表示させるのは不可能なのでしょうか？
お礼
orc-orcaさん ありがとうございます。 こちらの方法を試してみたのですが、firefoxの場合では、左に余白がついてしまいます。 どちらかを無視して作った方が良いのでしょうか＾＾;