画像添付のようにチェックボックスとその横の項目を横幅を指定した<li>

締切済

質問者：west-v
質問日時：2010/10/21 10:19
回答数：2件

画像添付のようにチェックボックスとその横の項目を横幅を指定した<li>で囲んでいます。
Firefox(3.6系)で確認すると、「１２３４５６７８９０１２３４５６７８９０」の全角数字が
全部チェックボックスの下にずれて表示されてしまいます。

同じ全角文字である「あああああああああああああああ」であれば、きちんと横幅で折り返してくれています。

Firefoxの仕様なのか、CSS等で対処方法があるかご存じの方がいらっしゃいましたら
ご教授お願いいたします。

※<li>にはfloat:leftをしてしています。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2010/10/21 21:58

長い単語（英語）が改行されないのと同様に、全角数字が数字として認識されているのではないでしょうか？

「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>