CSSでlist-style-position:outsideを使用するとリストアイコンが表示されない問題を解決しました

今日ウェブサイトのスタイルを変更していたところ、CSS 属性をいくら調整しても記事リストのアイコンが表示されないという問題が発生し、最終的に list-style-position:outside を list-style に変更しました。 -position:in にすると、リストアイコンが表示されます。 list-style-position:outside が表示されない理由を知るために、css 属性を色々削除してみましたが、明確な答えは見つかりませんでしたが、それは確かです。 ul li 属性の width: 100% および padding: 0 は、リスト アイコンが表示されないことに一定の影響を及ぼします。この問題が発生した場合は、これら 2 つの属性に注意してください。

css2.0 マニュアルでは、外側と内側の 2 つのパラメーターについて次のように説明しています:

list-style-position : outside | inside

Value:

outside: デフォルト値。リスト項目のマークがテキストの外側に配置され、周囲のテキストがマークに従って配置されません

inside: リスト項目のマークがテキストの内側に配置され、周囲のテキストがマークに従って配置されます

上より定義では、パディングが依然として影響を及ぼしていることがわかりますが、表示効果を実現するには、width: 100% または padding: 0 以外の他のスタイルを削除する必要があります。

スタイルの要件により、リスト行が超えたときに自動的に折り返さないという要件を満たすために、list-style-typeの10進数のアラビア数字の値を採用しました。次の 3 つのパラメータが使用されました:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

しかし、リストがアラビア数字で表示されなくなり、すべて数字の 1 に変更されたことがわかりました。 overflow:hiddenを削除すると問題は解決しましたが、省略記号が抜けなかったので、また別のハックを覚えました、今後注意が必要です。

以上がCSSでlist-style-position:outsideを使用するとリストアイコンが表示されない問題を解決しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。