横並びのメニューなどを作る場合など、要素を横に並べる方法のメモです。
/* ulでlist-style:none を指定し、無駄なmargin、paddingも0に指定 */ ul{ list-stype: none; margin:0; padding:0; } /* liの中でfloat:leftか、display:table-cellを指定する*/ li{ float:left; display: table-cell; } /* aタグを入れ込む場合にはdisplay:blockとwidth、heightの指定程度にする*/ li a{ display:block; width:100px; height:100px; }
注意点
- liの間に改行などがあると、変な隙間ができたり、要素が段々になったりします。
- display:table-cellは古いブラウザ(IE7以前など)では対応していないので注意。
- float:leftを使った場合、ulの後の要素でclear:bothするか、「clearfix」などの手法で使い回り込みを解除しておきます。