横並びのメニューなどを作る場合など、要素を横に並べる方法のメモです。

/* 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」などの手法で使い回り込みを解除しておきます。