acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

リストを横並びにする

ads

2009/3/10 テキスト修正

メニューによく使われるリストを横並びにする方法です。
横並びにするにはfloatプロパティを使う方法と、displayプロパティを使う方法の2種類あります。

まずはfloatを使う方法から解説します。
liをfloatで浮かせて左に詰めていくことで横並びに見えます。

li{
float:left;
padding-right:1em;
}

li a{
background-color:#999999;
}

次にdisplayプロパティを使う方法を解説します。
liはブロック要素なのでそのままでは縦に並びません。それをdisplayプロパティでinlineを指定し、inline要素に変換することで横並びを実現します。

li{
display:inline;
padding-right:1em;
}

li a{
background-color:#999999;
}

どちらも同じ見た目になりますが、ボタンのように均一な大きさで横並びにするためにはfloatを使い、リンクのa要素にdisplay:block、width,hightを指定します。
また、a要素だけにfloatとdisplay:block;を記述した場合はliが段になってしまう場合があるのでliにを記述するほうがコーディングミスが減ります。

li{
float:left;
padding-right:1em;
}

li a{
display:block;
background-color:#999999;
width:6em;
height:3em;
text-align:center;
line-height:3em;
}

リストのCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.