float: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

float は、フロート（浮動化）を指定するプロパティです。

このプロパティをli要素に対して設定すると、リスト項目を横並びで表示させることができます。


li {
width: 5em;
float: left;
}
プロパティ名 値 説明
float left ボックスを左に配置し、後続の内容を右側に回り込ませる
right ボックスを右に配置し、後続の内容を左側に回り込ませる

フロートの指定方法については、ボックスのフロート（浮動化）を指定するをご覧ください。

回り込みの解除について

以下の使用例では、clearプロパティを使用してリスト項目の回り込み（横並び）を解除しています。（指定方法については、回り込みを解除するをご覧ください）

以下の使用例では、list-style-typeプロパティを使ってリストのマーカーを消しています。また、li要素に対して境界線や背景色等を設定しています。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

ul.example {
width: 261px;
margin: 0;
padding: 0;
list-style-type: none;
}

ul.example li {
float: left;
width: 80px;
margin-right: 5px;
padding: 2px 0;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
}

.clearLeft { 
clear: left; 
}

</style>

</head>
<body>

<ul class="example">
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
</ul>

<p class="clearLeft">回り込みを解除しました。</p>

</body>
</html>
表示例
  • 項目A
  • 項目B
  • 項目C

回り込みを解除しました。