- 締切済み
画像添付のようにチェックボックスとその横の項目を横幅を指定した<li>
画像添付のようにチェックボックスとその横の項目を横幅を指定した<li>で囲んでいます。 Firefox(3.6系)で確認すると、「１２３４５６７８９０１２３４５６７８９０」の全角数字が 全部チェックボックスの下にずれて表示されてしまいます。 同じ全角文字である「あああああああああああああああ」であれば、きちんと横幅で折り返してくれています。 Firefoxの仕様なのか、CSS等で対処方法があるかご存じの方がいらっしゃいましたら ご教授お願いいたします。 ※<li>にはfloat:leftをしてしています。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
長い単語（英語）が改行されないのと同様に、全角数字が数字として認識されているのではないでしょうか？ 「wwwwwwwwwwwwwww」の方は是として、「１２３４・・・」の方だけを修正したいというのだと難しそう。 両方ともでよければ、word-wrap:break-wordなどを用いれば改行するようになります。 でも、チェックボックスとの間の方が優先されるので、1行下から始まるし、「あああ…」などの部分も2行目からはインデントしたくなりませんか？ てなことで、いい加減に書いてみたものを参考までに。(fx用) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> ul { list-style:none; width:560px; padding:0; margin:0; } /*ご質問の状態（想像）*/ ul li { width:160px; float:left; } /*調整してみたもの*/ ul.test li { width:140px; float:left; } ul.test li { position:relative; padding-left:20px; word-wrap:break-word;} ul.test li input { position:absolute; left:0; } </style> </head> <body> <ul> <li> <input type="checkbox" name="c1">wwwwwwwwwwwwwwwwwwwwwwwwww </li> <li> <input type="checkbox" name="c2">Ｑ＆Ａ </li> <li> <input type="checkbox" name="c3">あああああああああああああああ </li> <li> <input type="checkbox" name="c4">１２３４５６７８９０１２３４５６７８９０ </li> <li> <input type="checkbox" name="c5">質問 </li> </ul> <hr style="clear:left; margin-bottom:3em;"> <ul class="test"> <li> <input type="checkbox" name="d1">wwwwwwwwwwwwwwwwwwwwwwwwww </li> <li> <input type="checkbox" name="d2">Ｑ＆Ａ </li> <li> <input type="checkbox" name="d3">あああああああああああああああ </li> <li> <input type="checkbox" name="d4">１２３４５６７８９０１２３４５６７８９０ </li> <li> <input type="checkbox" name="d5">質問 </li> </ul> </body> </html>
- yambejp
- ベストアンサー率51% (3827/7415)
firefoxが全角数字を「数字」として解釈しているのだと思います。 いずれにしろオーバーフローした場合の処理ですから オーバーフローしないようにつくるというのが原則でしょう
