トップ > スタイルシートテクニック > リストを横に並べる[float]

リストを横に並べる[float]

スポンサード リンク
「float : left;」を使ってリストを横に並べる方法を紹介します。
記述方法は以下の通りです。
li{
  float : left;
  width : **px;
/*white-space : nowrap;*/
}
「float : left;」を指定する事で、通常なら下に続くはずのリストが右側に回り込むようになります。

また、floatを指定したブロックにはwidthを指定せよというCSSの仕様があるので、widthを指定しておきます。
IE6、Firefox、Operaで確認したところ指定しなくても問題なく表示されていましたが、念の為指定しておいた方が良いでしょう。

floatで回り込みを設定しているので、その後に続く要素で「clear : left;」を入れて回り込みを解除して下さい。
これも場合によっては指定しなくても問題なく表示出来ますが、念の為。

「white-space : nowrap;」はwidthをオーバーした文字が改行されないようにする為のものです。
全体の横幅に余裕がある場合で、文字が改行されたくない場合に指定して下さい。
横幅に余裕がない場合にこれを指定するとレイアウトが崩れる恐れがあるので注意して下さい。

以下サンプルです。

  • サンプル
  • サンプル
  • サンプル
ここでクリア(clear : left;)