Listes non ordonnées dans les listes ordonnées

Question

J'essaie de recréer ce qui suit, mais les sous-points sont affichés sous forme de lettres et non de numéros une fois que le site CSS est appliqué.

1. point 1

   1,1 point 1,1

   1,2 point 1,2

   • pour 1.2 Sous-liste
   • Une autre sous-liste pour 1,2

   1,3 point 1.3

   2. point 2

est ci-dessous une image de la façon dont il affiche sur mon site:

Nous vous remercions à l'avance pour ton aide!

Answer 1

Vous devez jouer un peu avec css, en utilisant compteurs. Regardez l'exemple ci-dessous:

ol { counter-reset: item; list-style-type: none; } 
 
ol > li:before { content: counters(item, ".") ". "; counter-increment: item } 
 
ul { list-style-type: disc; }

<ol> 
 
    <li>Point 1 
 
     <ol type="1"> 
 
     <li>Point 1.1</li> 
 
     <li>Point 1.2 
 
      <ul> 
 
       <li>Sublist for 1.2</li> 
 
       <li>Another Sublist for 1.2</li> 
 
      </ul> 
 
     </li> 
 
     <li>Point 1.3</li> 
 
     </ol> 
 
    </li> 
 
    <li>Point 2</li> 
 
</ol>

Answer 2

Suivez ce code HTML.

<ol> 
    <li>Point</li> 
    <ol type="a"> 
     <li>Point 1.1</li> 
     <li>Point 1.2 
      <ul style="list-style-type:disc"> 
       <li>Sublist for</li> 
       <li>Sublist for</li> 
      </ul> 
     </li> 
     <li>Point 1.3</li> 
    </ol> 
    <li>Point 2</li> 
</ol> 

Pas besoin d'utiliser de styles css externes.

Answer 3

Je pense que, pour y parvenir avec CSS/HTML, vous devez utiliser ul avec certains styles et modifier le texte dans la liste

<ol> 
    <li>Point</li> 
    <ul style="list-style:none;padding-left:10px;"> 
     <li>1.1. Point 1.1</li> 
     <li>1.2. Point 1.2 
      <ul style="list-style-type:disc"> 
       <li>Sublist for</li> 
       <li>Sublist for</li> 
      </ul> 
     </li> 
     <li>1.3. Point 1.3</li> 
    </ul> 
    <li>Point 2</li> 
</ol> 

https://fiddle.jshell.net/agdL1tam/

Answer 4

Vous pouvez remplacer ol avec ul, désactivez list-style et ajouter du style de liste "personnalisée" avec content de pseudo-élément

Ceci est par exemple de ol -subliste du paragraphe 1 (https://fiddle.jshell.net/319o3mek/):

HTML

<ol> 
    <li>Point</li> 
    <ul class="sub-ol-1"> 
     <li>Point 1.1</li> 
     <li>Point 1.2 
      <ul style="list-style-type:disc"> 
       <li>Sublist for</li> 
       <li>Sublist for</li> 
      </ul> 
     </li> 
     <li>Point 1.3</li> 
    </ul> 
    <li>Point 2</li> 
</ol> 

CSS

.sub-ol-1 { 
    list-style: none; 
} 

.sub-ol-1 > li { 
    position: relative; 
} 

.sub-ol-1 > li:before { 
    position: absolute; 
    left: -34px; 
    width: 30px; 
    text-align: right; 
} 

.sub-ol-1 > li:nth-child(1):before {content: '1.1.';} 
.sub-ol-1 > li:nth-child(2):before {content: '1.2.';} 
.sub-ol-1 > li:nth-child(3):before {content: '1.3.';} 
.sub-ol-1 > li:nth-child(4):before {content: '1.4.';} 
.sub-ol-1 > li:nth-child(5):before {content: '1.5.';} 
.sub-ol-1 > li:nth-child(6):before {content: '1.6.';} 
.sub-ol-1 > li:nth-child(7):before {content: '1.7.';} 
.sub-ol-1 > li:nth-child(8):before {content: '1.8.';} 
.sub-ol-1 > li:nth-child(9):before {content: '1.9.';} 
.sub-ol-1 > li:nth-child(10):before {content: '1.10.';} 
/* more if needed */