読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【HTML,CSS】要素を横並びにする基本的な方法を復習

floatを使う

floatでliがそれぞれ左寄せになるため横に並びます。

li{
  llist-style-type:none;
  margin:50px auto;
  width:310px; 
}
li{
  float:left;
}
a{
  display:block;
  background:#faa;
  height:40px;
  width:100px; 
}
ul li:nth-of-type(2) a{
  background:#afa;
}
ul li:nth-of-type(3) a{
  background:#aaf;
}

display:inline-block;を使う

paddingmやmaarginを設定できるインライン要素になります。

html,body,ul,li{
  padding:0;
  margin:0;
}
ul{
  list-style-type:none;
  margin:50px auto;
  width:321px; 
}
li{
  background:#fee;
  display:inline-block;
}
li+li{
  margin-left:0px;
}
a{
  display:block;
  background:#faa;
  height:40px;
  width:100px; 
}
ul li:nth-of-type(2) a{
  background:#afa;
}
ul li:nth-of-type(3) a{
  background:#aaf;
}

display: table-cell;を使う

marginが効かなくなるのでliの間を開けたい場合はulにborder-collapse: separate;とborder-spacing: ;を指定してマージンを調整します。

ul{
  list-style-type:none;
  margin:50px auto;
  width:300px;
}
li{
  display: table-cell;
}
a{
  display: table-cell;
  background:#faa;
  height:40px;
  width:100px; 
}
ul li:nth-of-type(2) a{
  background:#afa;
}
ul li:nth-of-type(3) a{
  background:#aaf;
}