サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
リスト横並び（display）
- リストの横並びは、displayプロパティ を指定します。
- 項目の間隔も同時に広げる場合には、marginを指定します。
- 項目の間隔を詰める場合には、paddingを指定します。
- [使い方]
- li{
display: inline;
margin-right: 1em;
}
displayについては、こちらをご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| display: | inline; | インラインで表示します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
ul.sample li{
display: inline;
margin: 0 1em;
border: 3px #999999 double;
}
ul.sample2 li{
display: inline;
padding: 0 1em;
border: 3px #999999 solid;
}
.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>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
