制作記事 Web制作マークアップhtmlinputタグをコントロールする

inputタグをコントロールする

inputタグの文字間を上手にコントロールする術を模索している。

百聞は一見にしかず、ということでサンプルを見てほしい。

xhtml
<ul>
<li><input type="checkbox" /><label>テキスト</label></li>
<li><input type="checkbox" /><label>テキスト</label></li>
<li><input type="checkbox" /><label>テキスト</label></li>
<li><input type="checkbox" /><label>テキスト</label></li>
</ul>
CSS
ul{
list-style:none;
line-height:1;
}
li{
margin:0 0 3px;
padding:0;
font-size:12px;
}

ie6でのキャプチャ

ff3でのキャプチャ

問題は何もないように感じるが、チェックボックス間の空白をつめたい場合やチェックボックスとテキストの位置を合わせたい場合、このままではどうしようもない。
inputはブラウザ初期値としてmarginやpaddingの値があるからだろうと、それぞれの値を0にしてみた。Firefoxは、想像通りの挙動をしてくれたが、IEが6も7もどうにもうまくいかない。

しかし、いろいろ試した結果、スマートにうまくいく記述の仕方を見つけた!

追加するCSS
input{
display:block;
float:left;
width:12px;
height:12px;
margin:0 3px 0 0;
padding:0;
overflow:hidden;
}

ie6でのキャプチャ

ff3でのキャプチャ

ポイントは、フォントサイズとinputの高さを合わせること、かつinputをブロック要素としてフロートすること。あとは、他のモダンブラウザでうまいこといけばよし!