Nach dem CSS-Reset werden Listenelemente ohne Markierungssymbole angezeigt

Question

Mein Problem ist also, dass etwas in meiner CSS-Datei base.css dazu führt, dass die Tags ol und ul weder Aufzählungspunkte noch 1., 2. usw. anzeigen.

Dies ist der Code der Datei:

* {
    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) */
}

Bitte helfen Sie, dieses Problem zu lösen und sagen Sie mir, was ol und ul verändern kann

Ich habe versucht, mir den Code anzusehen, habe aber nichts gefunden..

Ich habe die CSS-Datei gelöscht, um zu überprüfen, ob dies die Ursache des Problems war und ob es korrekt war,

Nach dem Löschen der CSS-Datei base.css wird sie normal angezeigt und zeigt Aufzählungspunkte und Anzahl davor in den OL- und UL-Tags an.

EDIT: Bitte beachten Sie, dass die einzige Klasse für ol und uls der übergeordnete div .container ist. Ich habe im Inspektor nachgesehen und das li wird als list-item

angezeigt

Answer 1

ol 和 ul 标签不显示项目符号和数字的问题可能是由于页面上所有元素的 list-style 属性设置为 none 造成的。如果您将以下代码添加到您的 base.css 文件中，就会发生这种情况：

* {
    list-style: none;
}

要解决此问题，您可以删除此代码或为 ol 和 ul 标记添加特定规则以显示其默认项目符号点或数字。例如，您可以将以下代码添加到您的 base.css 文件中：

ol, ul {
    list-style: initial;
}

这会将 ol 和 ul 标签的列表样式属性设置为其初始值，默认情况下应显示项目符号点或数字。

Answer 2

问题是项目符号出现在 ul / ol 元素的填充中，并且您有一个删除所有填充的全局规则：

* {
  padding: 0;
}

这意味着虽然它们仍会排队等待渲染，但它们会在 0px 宽的区域中渲染，因此不可见。

---

还有其他原因可能导致项目符号无法显示（例如，因为 li 标签的 display 类型已从 list-item 更改为> 到其他东西，或者因为 list-style 规则显式隐藏它们），但这些都不适用于您当前正在查看的情况。

---

您可以通过以下两种方法之一解决此问题：

• 向页面上的 ul / ol 元素添加一定量的填充，例如

  ul, ol {
    padding: 10px;
  }
  

• 将项目符号设置为在这些元素内显示，而不是在其填充区域中显示：

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