inasphere blog

横並びのfloatリストの左に要素を置くには、その要素もfloatさせればよい

よく見かける下のような横に並んだリストがあって、

これの前にチェックボックスをつけようとして上手くいかず、苦しんだのが悔しかったのでメモ。

単純に<input>を置くだけでは下のように段差ができるし、<input>や<ul>にstyle="display: inline;"を指定しても同じ。チェックボックスとリストを同じ<div>でくくってみたりしても、もちろんダメ。

さんざん悩んだ挙句、やっと気づいた方法が<input>もfloatさせればよいということ。

わかってみれば超当たり前のことだけど、リスト要素と同列にfloatさせるという発想が思い浮かばなかったのが敗因。

このエントリのトラックバックURL:
http://inasphere.net/mt/mt-tb.cgi/53
（このエントリへの言及リンクのないトラックバックは反映されません）

運営者：ina
詳細はプロフィール参照。

連絡先：

現在このブログは更新停滞中です。はてなダイアリーの方へどうぞ。

このブログは、上記のクリエイティブ・コモンズ・ライセンスで保護されています。