サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
入れ子にされたリストの余白
- 入れ子にされたリストの余白（インデント）は、marginプロパティとpaddingプロパティを指定します。
- paddingを「0」にして、左マージンで調節します。
- [使い方]
- .sample{
margin: 0 0 0 20px;
padding: 0;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| margin: | ; |
外側の余白を指定できます。
「数値+単位」（例・・100px）を指定します。 単位は、「px」・「em」など、または「%」を指定します。 auto（自動） |
| padding: | ; |
内側の余白を指定できます。
「数値+単位」（例・・100px）を指定します。 単位は、「px」・「em」など、または「%」を指定します。 |
marginについては、こちらをご覧ください。
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
ul.sample li ul {
margin: 0 0 0 5em;
padding: 0;
}
-->
</style>
[ｂｏｄｙの中]
<ul><li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科
<ul>
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
</li>
<li>胡蝶蘭・ラン科</li>
</ul>
<ul class="sample">
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科
<ul>
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
</li>
<li>胡蝶蘭・ラン科</li>
</ul>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- 胡蝶蘭・ラン科
