サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
リスト横並び（float）
- リストの横並びは、floatプロパティを指定します。
- 項目の間隔も同時に広げる場合には、marginを指定します。
- 項目の間隔を詰める場合には、paddingを指定します。
- widthプロパティを指定するように
- [使い方]
- li{
width: 200px;
float: left;
margin-right: 10px;
}
floatについては、こちらをご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| float： | left ； | ボックスを左に配置・後に続く内容などを右側に回り込ませます。 |
| right； | ボックスを右に配置・後に続く内容などを左側に回り込ませます。 |
回り込みを解除
- 回り込みを解除させるには、clearプロパティを指定します。
- [使い方]
- <sample style="clear: right;">
| プロパティ名 | 値 | 説明 |
|---|---|---|
| clear： | left； | ボックスの右側にある回り込みを解除します。 |
| right； | ボックスの左側にある回り込みを解除します。 | |
| both； | どちらの回り込みも解除します。 | |
| none ； | 解除しません。（初期値） |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
ul.sample{
list-style-type: none;
}
ul.sample li{
width: auto;
float: left;
margin: 0 20px;
border: 3px #999999 double;
white-space: nowrap;
}
ul.sample2{
display: inline;/*左端に詰めます。*/
list-style-type: none;
}
ul.sample2 li{
width: auto;
float: left;
padding: 0 20px; /*リスト間の空白をつめます。*/
border: 3px #999999 solid;
display: inline;
white-space: nowrap; /*段落ちを防ぎます。*/
}
.sam{
margin-top: 60px;
}
-->
</style>
[ｂｏｄｙの中]
<ul class="sample"><li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
<div class="sam">
<ul class="sample2">
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
</div>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
