【CSS】line-styeが効かない時の解決方。1行追加で解決します。

HTML/CSS
スポンサーリンク

CSSで、リスト表示する時には、「ul & li」や「dl & dt & dd」を使いますが、
その際、リストの頭に中黒(・)、白丸、四角や、任意の画像の表示設定が可能です。
(何も指定をしないデフォルトではdisc(中黒)です。)

たとえばリストの頭に「白丸」をつけたいのであれば、

li {
    list-style: circle;
}

とCSS内で設定すれば白丸を表示させることができます。

例では「list-style」で指定していますが、「list-style-type」でもOKです。

スポンサーリンク

ちゃんと設定しているのに表示されいない?

ちゃんと設定しているのでに何故かリストの頭文字設定がうまくいかない場合は、以下の方法を試してみてください。

li {
    display: list-item;
    list-style: circle;
}

ポイントはdisplayの設定。
「display: list-item;」 の1行をプラスするだけでちゃんと表示されるはずです。

超カンタン。

「!important」や「display:flex」、「float:left」などアレコレしてもうまく行かなった方は、上記の方法で一発解決です。

コメント

タイトルとURLをコピーしました