リストの左余白をなくする方法
リストの左余白を設定する
リストを作ると左に余白ができます。（リストのインデント参照）この余白をなくする方法です。
<ul>タグにマージンの設定をするのですが、ブラウザによって、見え方が違うようです。左マージンを"0"にするとリストの箇条書きまで見えなくなってしまいます。左マージンは最低でも１文字分はとらないと、リスト全体は表示されません。
◆<head>と</head>の間に下記のタグを入れます。
<style type="text/css">
<!--
ul {
margin-left: 1em;
}
-->
</style>
1emは、1文字分長さの単位です。pxで記述する場合は、最低でも8pxは必要だとされています。下記のサンプルはmargin-left: 8px;
padding-left: 8px;です。margin-left: 1em; と結果はほぼ同じでした。
<!--
ul {
margin-left: 1em;
}
-->
</style>
<style type="text/css">
<!--
ul {
margin-left: 8px
padding-left: 8px;
}
-->
</style>
html ↓
<!--
ul {
margin-left: 8px
padding-left: 8px;
}
-->
</style>
<ul>
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>
ウェブ上での見え方です ↓↓ 左余白がなくなり、マーカーもきちんと表示されています。<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>
- 項目その１、リスト２行目から揃う。（改行も可）
- 項目その２、リスト２行目から揃う。（改行も可）
- 項目その３、リスト２行目から揃う。（改行も可）
リストマークに画像を使用
- 項目その１、リスト２行目から揃う。（改行も可）
- 項目その２、リスト２行目から揃う。（改行も可）
- 項目その３、リスト２行目から揃う。（改行も可）
◆<head>と</head>の間に下記のタグを入れます。
<style type="text/css">
<!--
ul{
margin-left: 1.0em;
}
li{
list-style: url(sample.gif) outside;
}
-->
</style>
<!--
ul{
margin-left: 1.0em;
}
li{
list-style: url(sample.gif) outside;
}
-->
</style>
画像を表示させるのに、background プロパティを使用する方法もありますが、項目が複数行になった時、特にcenter を指定した場合などは、複数行の真ん中に表示されてしまうので、list-style で記述しました。
list-styleは、 list-style-type、 list-style-image、 list-style-positionをまとめて記述できるプロパティです。 指定する値を半角スペースで区切って記述します。順不同です。
マーク付きリスト 番号付きリスト 定義型リスト リストのインデント CSS・リストで作るメニュー
●当サイトのソースは、IE6.0＋のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。
★skip ページtop
