L'affichage des cellules de table ne fonctionne pas

Question

J'ai un menu horizontal construit en utilisant un élément <ul>. J'essaie de l'obtenir pour répartir uniformément chaque <li> sur la largeur du menu. Sur la base de plusieurs réponses ici sur SO, je le CSS suivant:

ul { 
    display: table; 
    width: 100%; 
} 

ul li { 
    display: table-cell; 
} 

Cependant, peu importe ce que j'essaie, les <li> éléments finissent toujours avec un affichage calculé de block, avec ces informations contradictoires du débogueur (testé en FF et Chrome):

Je ne savais pas ce qui se passe ici, et (surtout) comment puis-je obtenir mes articles de liste pour afficher comme table-cell?

Answer 1

Dans la photo est montré que votre style.css est vraiment grand (min.1835 lignes) et à cause de ces styles à ul pourrait être surcrite quelque part. Pour rendre votre règle plus importante que la règle existante, utilisez mot-clé importante après la règle comme si:

ul { 
    display: table!important; 
    width: 100%!important; 
} 

ul li { 
    display: table-cell!important; 
} 

Answer 2

CSS a un trait appelé importance, il choisit quelles sont les règles les plus spécifiques et doivent donc passer outre des règles plus lâches. Comme vous semblez utiliser un framework CSS, vos propres règles ne remplacent pas les règles génériques du framework. Il s'avère que vous avez deux options pour accroître l'importance de vos règles à main.css:

1. Ajouter !important après vos règles:

   ul li { 
       display: table cell !important; 
   } 
   

2. Faites vos sélecteurs plus spécifiques:

   #menu ul li.menu-list-item { ... } 
   

Votre question semble également très étrange et vous pouvez être sujet à un sourcils er rendu bug, avez-vous essayé avec d'autres navigateurs?