web-dev-qa-db-fra.com

Le style de liste UL ne s'applique pas

J'ai une feuille de style qui, pour une raison quelconque, n'appliquera pas le type de style de liste à un élément UL. J'utilise la grille CSS de YUI avec leur fichier reset-fonts-grid.css, que je connais qui supprime cela dans le cadre de la réinitialisation CSS.

Après avoir appelé YUI, j'appelle la feuille de style pour le site Web et y ai un bloc pour UL:

ul {list-style-type: disc;}

J'ai également essayé de le définir via un style de liste, mais j'obtiens le même résultat. Je sais que le bloc CSS ci-dessus est lu comme si j'ajoutais des éléments comme le remplissage ou les marges qui étaient appliqués. Le type de style n'apparaît ni dans Firefox ni dans IE.

Les seuls autres CSS que j'ai appliqués aux UL sont dans une div #nav mais ce CSS ne touche pas le type de style de liste, il utilise la réinitialisation fournie par YUI, et YUI et la feuille de style de site sont les deux seuls CSS feuilles qui sont appelées.

J'ai également FCKEditor sur le côté administrateur du site et cet éditeur affiche les styles de puces, donc je sais que cela doit être quelque chose avec le CSS qui n'est pas filtré par FCKEditor.

csslistyui-grids
45
dragonmantank

Si je ne me trompe pas, vous devriez appliquer cette règle au li, pas au ul.

ul li {list-style-type: disc;}
19
steve_c

Vous devez inclure les éléments suivants dans votre CSS:

li { display: list-item; }

Cela déclenche Firefox pour afficher le disque.

133
Big Buddy

et vous pouvez également donner une marge gauche si le reset.css que vous utilisez rend toute marge nulle: cela signifie:

li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}

En supposant que vous appliquez ce CSS après la réinitialisation, cela devrait fonctionner!

Matthieu Ricaud

35
user415535

J'ai eu ce problème et il s'est avéré que je n'avais aucun rembourrage sur l'ul, ce qui empêchait les disques d'être visibles.

Margin joue aussi avec ça

18
AJ Zane

Assurez-vous que le 'li' n'a pas overflow: hidden appliqué.

15
PipoPepino

Ce problème était dû au fait que l'attribut lidisplay était défini sur block dans une classe parente. Remplacer par list-item résolu le problème.

14
tiberdoo

Ma reset.css était margin: 0, padding: 0. Après plusieurs heures de recherche et de dépannage, cela a fonctionné:

li {
    list-style: disc outside none;
    margin-left: 1em;
}

ul {
    margin: 1em;
}
3
nara_l

J'ai eu ce problème et il s'est avéré que je n'avais aucun rembourrage sur l'ul, ce qui empêchait les disques d'être visibles.

3
alimac83
  • Avez-vous essayé de suivre la règle avec! Important?
  • Quelle feuille de style FireBug montre-t-elle avoir le dernier contrôle sur l'élément?
  • Est-ce en direct quelque part pour être vu par les autres?

Mise à jour

Je suis assez convaincu que fournir des exemples de code vous aiderait à recevoir une solution plus rapidement. Si vous pouvez télécharger un exemple de ce problème quelque part ou fournir le balisage afin que nous puissions le tester sur nos hôtes locaux, vous aurez de meilleures chances d'obtenir des informations précieuses.

Le problème avec les questions est qu'elles conduisent les autres à croire que la personne qui pose la question a suffisamment de connaissances pour poser la question. En programmation, ce n'est pas toujours le cas. Il y a peut-être quelque chose que vous avez manqué ou accidentellement glissé. Sans que d'autres aient les yeux sur votre code, ils doivent supposer que vous n'avez rien manqué et que vous n'avez rien oublié.

2
Sampson

Dans IE j'utilise juste une classe "normal_ol" pour styliser une liste ol et j'ai fait quelques modifications comme ci-dessous:

code précédent: ol.normal_ol {float: left; rembourrage: 0 0 0 25px; marge: 0; largeur: 500px;} ol.normal_ol li {police: normal 13px/20px Arial; couleur: # 4D4E53; flotteur: gauche; largeur: 100%;}

code modifié: ol.normal_ol {float: left; rembourrage: 0 0 0 25px; margin: 0;} ol.normal_ol li {font: normal 13px/20px Arial; couleur: # 4D4E53; }

1
Somashree Patra

Tout ce à quoi je peux penser, c'est que quelque chose l'emporte par la suite.

Vous incluez les styles de réinitialisation premier, non?

1
dylanfm

Tout ce que vous avez à faire est d'ajouter cette classe à votre CSS.

.ul-no-style { list-style: none; padding: 0; margin: 0; }

Il est extrêmement important d'inclure le remplissage et la marge à 0. Faites-moi confiance.

1
Jason

Il s'avère que la réinitialisation CSS de YUI supprime le style de liste de "ul li" au lieu de simplement "ul", c'est pourquoi le définir uniquement dans "ul" n'a jamais fonctionné.

0
dragonmantank