Après la réinitialisation CSS, les éléments de la liste s'affichent sans symboles de marqueur

Question

Donc, mon problème est que quelque chose dans mon fichier CSS base.css fait que les balises ol et ul n'affichent pas de puces ni 1., 2. etc.

Voici le code du fichier :

* {
    margin: 0; /* supprime les marges par défaut */
    padding: 0; /* supprime le padding par défaut */
    font-family: Roboto, Noto, sans-serif; /* définit la police de caractère par défaut */
    box-sizing: border-box; /* change la façon dont les éléments sont mesurés */
    scroll-behavior: smooth; /* permet de faire un scroll smooth */
}


body {
    background-color: #fefefe; /* définit la couleur de fond */
}


.marquee-container {
  overflow: hidden; /* cache le texte dépassant (permet d'eviter des scrollbar)*/
  background-color: red;
  color: #fff;
  padding: 3px;
}

.marquee {
  min-width:100%;
  animation: marquee 40s linear infinite; /* animation de défilement doit durer 40s et ne jamais s'arreter */
}


.marquee:hover {
  animation-play-state: paused; /* si on passe la souris sur le texte, l'animation s'arrete */
}


@keyframes marquee {
  from{margin-left : -20%;} /* le texte commence à -20% de la largeur de la page permet de faire uen animation qui sort de l'écran */
    to{margin-left: 120%;} /* le texte finit à 120% de la largeur de la page permet encore une fois de finir hors de l'écran */
} 


header {
    width: 100%;
    height: 80px;
    display: flex; /* permet de mettre les éléments les uns à côté des autres */
    align-items: center; /* permet de centrer verticalement les éléments */
    justify-content: space-between; /* permet de mettre un espace entre les éléments */
}


.nav-logo {
    margin: 0 0 0 20px;
    height: 40px;
}


.navbar {
    display: flex; /* permet de mettre les éléments les uns à côté des autres dans la navbar (notamment necessaire pour la search-bar) */
    align-items: center; /* permet de centrer verticalement les éléments */
}


.search {
    display: flex; /* permet de mettre les éléments les uns à côté des autres dans la search-bar */
    align-items: center; /* permet de centrer verticalement les éléments */
}


.search input {
    border: solid 2px #aaaa; /* définit la couleur et taille de la bordure */
    border-radius: 40px 0 0 40px; /* définit les coins arrondis */
    padding: 10px 15px;
    font-size: 16px; /* définit la taille de la police */
    width: 500px; /* définit la largeur de la search-bar */
}


.search input:focus{
    border-color: #333; /* définit la couleur de la bordure quand on clique dedans */
}


.loupe button {
    border-radius: 0 40px 40px 0; /* définit les coins arrondis */
    border: solid 2px #aaaa; /* définit la couleur et taille de la bordure */
    border-left: none; /* supprime la bordure gauche pour que les coins arrondis soient bien visibles et que ca "matche" avec l'autre partie de la search-bar */
    padding: 8px 0;
    cursor: pointer; /* change le curseur quand on passe la souris sur le bouton */
}


.search img {
    height: 19.5px;
    padding: 1px 15px;
}


.tooltip-loupe {
    font-size: 12px;
    position: absolute; /* permet de positionner l'élément par rapport à des mesures sur la page, ne bouge jamais */
    z-index: 1; /* permet de mettre l'élément au dessus des autres */
    display: flex;
    background-color: rgb(220, 220, 220);
    width: auto;
    padding: 10px;
    border-radius: 10px;
    color: #333;
    opacity: 0; /* permet de rendre l'élément invisible */
    pointer-events: none; /* permet de ne pas prendre en compte les évènements de la souris sur l'élément */
}


.loupe:hover .tooltip-loupe {
    opacity: 1; /* permet de rendre l'élément visible (l'element passe de visible a invisible quand on passe sur le bouton)*/
    transition: ease-in-out all 0.2s; /* permet de faire une transition quand on passe la souris sur le bouton pour faire plus joli lors du changement d'opacite*/
}


.panier img {
    margin: 0 0 0 20px;
    height: 30px;
    width: 30px;
}


.tooltip-panier {
    font-size: 12px;
    position: absolute; /* permet de positionner l'élément par rapport à des mesures sur la page, ne bouge jamais */
    z-index: 1; /* permet de mettre l'élément au dessus des autres */
    display: flex;
    background-color: rgba(220, 220, 220);
    width: auto;
    padding: 10px;
    border-radius: 10px;
    color: #333;
    opacity: 0; /* permet de rendre l'élément invisible */
    pointer-events: none; /* permet de ne pas prendre en compte les évènements de la souris sur l'élément */
}


.panier:hover .tooltip-panier {
    opacity: 1; /* permet de rendre l'élément visible (l'element passe de visible a invisible quand on passe sur le bouton)*/
    transition: ease-in-out all 0.2s; /* permet de faire une transition quand on passe la souris sur le bouton pour faire plus joli lors du changement d'opacite*/
}


.hamburger {
    cursor: pointer; /* change le curseur quand on passe la souris sur le bouton */
}


.hamburger .line {
    display: block; /* permet de mettre les éléments les uns en dessous des autres */
    width: 30px;
    height: 3px;
    background-color: #333;
    margin: 6px 30px;
}


.hamburger.active .line:nth-child(2) {
    opacity: 0; /* permet de rendre l'élément invisible pour qu'il ne reste que deux elements (les deux qui vont faire la croix)*/
}


.hamburger.active .line:nth-child(1) {
    transform: translateY(8px) rotate(135deg); /* permet de faire une rotation de 135 degres et de descendre l'element de 8px la barre se met en diagonale pour former la croix */
    transition: all 0.3s ease-in-out; /* permet de faire une transition pour faire plus joli lors du changement de position */
}


.hamburger.active .line:nth-child(3) {
    transform: translateY(-10px) rotate(-135deg); /* permet de faire une rotation de -135 degres et de monter l'element de 10px la barre se met en diagonale pour former la croix */
    transition: all 0.3s ease-in-out; /* permet de faire une transition pour faire plus joli lors du changement de position */
}


.menu {
    text-align: center; /* permet de centrer horizontalement le texte */
    display: none; /* permet de rendre l'élément invisible */
}


.menu h1 {
    margin: 30px;
}


.menu .armes {
    display: flex; /* permet de mettre les éléments les uns à côté des autres */
    justify-content: center; /* permet de centrer horizontalement les éléments */
}


.card {
    margin: 0 20px; 
    padding: 10px;
    background-color: rgb(235, 234, 232);
    border-radius: 10px; /* définit les coins arrondis */
    box-shadow: 10px 5px 5px rgba(0, 0, 0, .2); /* permet d'ajouter une ombre à l'élément */
    flex-wrap: wrap; /* permet de mettre les éléments les uns en dessous des autres quand la fenetre devient trop petite */
}


.card:hover {
    transform: translateY(-10px); /* permet de faire une translation de 10px vers le haut quand on passe la souris sur l'élément */
    transition: all 0.1s ease-in-out; /* permet de faire une transition pour que l'utilisateur puisse bien voir sur quel element il se trouve */
}


.card a {
    font-size: 16px;
    color: #333; /* permet de changer la couleur du texte */
    text-decoration: none; /* permet de retirer le soulignement du texte */
}

.card img {
    width: 200px;
    height: 150px; 
}


.menu.active {
    display: block; /* quand le menu est actif, on affiche le menu */
}


.container.hidden {
    display: none; /* permet de rendre l'élément invisible quand le menu est actif car on veut cacher le reste de la page (sauf footer et header) */
}


.scroll-up img {
    position: fixed;
    width: 50px;
    right: 30px;
    bottom: 60px;
    cursor: pointer;
    background-color: #d8d8d8;
    border: solid #d8d8d8;
    border-radius: 100px;
}


.scroll-up img:hover {
    background-color: #e8e8e8;
}


footer {
    background-color: rgb(235, 234, 232);
    color: #333;
    font-size: 16px;
    margin-top: 50px;
    padding: 40px 20px 10px 20px;
}


footer a {
    color: #333;
    text-decoration: none; /* permet de retirer le soulignement du texte */
}


footer a:hover {
    color: #333;
    border-bottom: 2px solid #333; /* permet de mettre un soulignement au texte quand on passe la souris dessus */
}


.footer-info {
    display: flex; /* permet de mettre les éléments les uns à côté des autres */
    justify-content: space-between; /* permet de mettre un espace entre les éléments */
    align-items: center; /* permet de centrer verticalement les éléments */
    margin-top: 20px;
}


.footer-icons { 
    height: 25px;
    width: 25px;
    margin: 0 8px;
}


footer .regroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


footer .regroup p {
    margin: 0 20px;
    font-size: 1.5rem;
}


footer .socials img:hover {
    transform: scale(1.2); /* permet d'agrandir les icones quand l'utilisateur passe la souris dessus */
    transition: all 0.1s ease-in-out; /* permet de faire une transition pour que l'utilisateur puisse bien voir sur quel element il se trouve */
}


.link-block a {
    margin: 0 20px 0 0;
}


#payments-logo {
    height: 30px;
    width: 150px;
}


#cookie-popup {
    position: fixed; /* permet de fixer l'élément en bas de la page */
    bottom: 0; /* permet de fixer l'élément en bas de la page */
    left: 0; /* permet de fixer l'élément à gauche de la page */
    width: 100%; /* permet de prendre toute la largeur de la page */
    background-color: #333;
    color: #fff;
    padding: 30px;
}


.cookie-flex {
    display: flex; /* permet de mettre les éléments les uns à côté des autres */
    justify-content: space-between; /* permet de mettre un espace entre les éléments */
    align-items: center; /* permet de centrer verticalement les éléments */
}


#cookie-popup span {
    background-color: rgb(233, 192, 12);
    box-shadow: 2px 2px rgb(233, 192, 12);
    border-radius: 5px;
    padding: 10px;
    color: #333;
    cursor: pointer;
}


#cookie-popup span:hover {
    background-color: rgb(255, 231, 98); /* permet de changer la couleur de fond quand on passe la souris dessus */
}


#cookie-popup.hidden {
    display: none; /* permet de rendre l'élément invisible quand l'utilisateur a deja accepte (en fonction du LocalStorage) */
}

Veuillez aider à résoudre ce problème et dites-moi ce qui peut modifier ol et ul

J'ai essayé de regarder le code mais je n'ai rien trouvé..

J'ai supprimé le fichier CSS pour vérifier si c'était la cause du problème et qu'il était correct,

Après avoir supprimé le fichier CSS base.css, il s'affiche normalement et affiche les puces et le nombre avant dans les balises ol et ul.

EDIT : Veuillez noter que la seule classe pour ol et uls est le div parent .container, j'ai vérifié dans l'inspecteur et le li apparaît comme list-item

Answer 1

Le problème avec les balises ol et ul qui n'affichent pas les puces et les chiffres peut être dû au fait que l'attribut de style de liste est défini sur aucun pour tous les éléments de la page. Cela se produira si vous ajoutez le code suivant à votre fichier base.css :

* {
    list-style: none;
}

Pour résoudre ce problème, vous pouvez supprimer ce code ou ajouter des règles spécifiques pour les balises ol et ul afin d'afficher leurs puces ou numéros par défaut. Par exemple, vous pouvez ajouter le code suivant à votre fichier base.css :

ol, ul {
    list-style: initial;
}

Cela définira les propriétés de style de liste des balises ol et ul à leurs valeurs initiales, qui devraient afficher des puces ou des chiffres par défaut.

Answer 2

Le problème est que la puce apparaît dans le remplissage de l'élément ul / ol, et vous avez une règle globale qui supprime tout remplissage :

* {
  padding: 0;
}

Cela signifie que même s'ils seront toujours en file d'attente pour être rendus, ils seront rendus dans une 0px zone large et donc non visibles.

---

Il existe d'autres raisons pour lesquelles les puces peuvent ne pas être affichées (par exemple, parce que la règle li 标签的 display 类型已从 list-item 更改为> 到其他东西，或者因为 list-style les masque explicitement), mais aucune de celles-ci ne s'applique à la situation que vous examinez actuellement.

---

Vous pouvez résoudre ce problème de deux manières :

• Ajoutez une certaine quantité de remplissage à l'élément ul / ol de la page, par exemple

  .

  ul, ol {
    padding: 10px;
  }
  

• Définissez les puces pour qu'elles apparaissent à l'intérieur de ces éléments plutôt que dans leur zone de remplissage :

  ul, ol {
    list-style-position: inside;
  }