float: ***;
ブラウザ |
|
---|---|
プロパティ |
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
回り込みを解除しました。