Le style de liste UL ne s'applique pas

StackOverflow https://stackoverflow.com/questions/486211

  •  20-08-2019
  •  | 
  •  

Question

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

Après avoir appelé YUI, j’appelle la feuille de style du site Web et un bloc pour UL y figure: 

ul {list-style-type: disc;}

J'ai également essayé de le définir via une liste mais obtenez le même résultat. Je sais que le bloc CSS ci-dessus est lu comme si j'y ajoutais des éléments tels que le remplissage ou les marges. 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 que 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 du site sont les mêmes. seulement deux feuilles CSS appelées.

J'ai également FCKEditor dans la partie administrative du site et cet éditeur affiche les styles de puces. Je sais donc que le CSS ne doit pas être filtré par FCKEditor.

Était-ce utile?

La solution

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

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

Autres conseils

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

li { display: list-item; }

Ceci déclenche l'affichage du disque par Firefox.

et vous pouvez aussi donner une marge de gauche si le reset.css que vous utilisez annule toute marge: cela signifie: 

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

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

Matthieu Ricaud

  

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

La marge décoiffe aussi

Make sure the 'li' doesn't have overflow: hidden applied.

This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.

I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.

My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:

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

ul {
    margin: 1em;
}
  • Have you tried following the rule with !important?
  • Which stylesheet does FireBug show having last control over the element?
  • Is this live somewhere to be viewed by others?

Update

I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.

The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.

All I can think of is that something is over-riding this afterwards.

You are including the reset styles first, right?

In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:

previous code: ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;} ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}

modified code: ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;} ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }

All you have to do is add this class to your css. 

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

Including the padding and margin set at 0 is extremely important. Trust me.

Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top