Résolution du problème selon lequel l'icône de la liste ne s'affiche pas lors de l'utilisation de list-style-position:outside en CSS

Lorsque je modifiais le style d'un site Web aujourd'hui, j'ai rencontré un problème. Peu importe la façon dont j'ai ajusté les attributs CSS, une icône de liste d'articles n'apparaissait jamais. Finalement, j'ai changé la list-style-position. :outside to list- Lorsque style-position:inside, l'icône de liste s'affiche. Afin de savoir pourquoi list-style-position:outside n'est pas affiché, j'ai continué à essayer de supprimer divers attributs CSS pour découvrir la raison pour laquelle outside n'était pas affiché. Cependant, je n'ai jamais trouvé de réponse définitive, mais il est certain que. ul Les attributs li width : 100% et padding : 0 auront un certain impact sur le fait que l'icône de la liste ne s'affiche pas. Si vous rencontrez ce problème, veuillez faire attention à ces deux attributs.

Le manuel css2.0 explique les deux paramètres extérieur et intérieur comme suit :

list-style-position : outside | inside

Valeur :

extérieur : valeur par défaut. La marque d'élément de liste est placée à l'extérieur du texte et le texte environnant n'est pas aligné selon la marque

à l'intérieur : La marque d'élément de liste est placée à l'intérieur du texte et le texte environnant est aligné selon la marque

Comme le montre la définition ci-dessus, le remplissage a toujours un impact, mais je n'ai pas pu savoir exactement ce qui n'a pas fonctionné ici. Supprimez les autres styles sauf width:100% ou padding:0 et le. un effet d'affichage peut être obtenu.

Le problème prend fin. En raison d'exigences de style, j'ai remplacé list-style-type par la valeur des chiffres arabes décimaux afin de répondre à l'exigence de ne pas enrouler automatiquement les lignes. lorsque la ligne de liste dépasse , les trois paramètres suivants sont utilisés :

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

Cependant, on constate que la liste ne s'affiche plus avec des chiffres arabes, mais deviennent tous le chiffre 1. Lors de la suppression de overflow:hidden, le problème a été résolu, mais les ellipses ne pouvaient pas apparaître, j'ai donc appris un autre hack auquel je devrai prêter attention à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!