CSS重設後，清單項目顯示時沒有標記符號

Question

所以我的問題是我的 css 檔案 base.css 中的某些內容使 ol 和 ul 標記不顯示項目符號點也不顯示 1.、2. 等。

這是檔案的程式碼：

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

請幫忙解決這個問題並告訴我什麼可以修改 ol 和 ul

我嘗試查看程式碼，但沒有找到任何東西..

我刪除了 css 檔案來檢查這是否是導致問題的原因，這是正確的，

刪除css檔案base.css後，它會正常顯示，並在ol和ul標籤中顯示項目符號點和先前的計數。

編輯：請注意，ol 和 uls 唯一的類別是父 div .container，我在檢查器中檢查，li 顯示為 list-item

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;
  }