Affichage de la liste centrée à puces

Question

Je rencontre un problème lors de l'affichage d'une liste à puces, comme dans le lien de la pièce jointe. Je l'ai déjà essayé la combinaison CSS presque possible mais incapable de réaliser ce que je veux:

Mon code ressemble à ceci:

.sunco-listed { 
 
    width: 500px; 
 
} 
 

 
.sunco-listed ul { 
 
    text-align: center; 
 
} 
 

 
.sunco-listed li { 
 
    float: left; 
 
    padding-right: 25px; 
 
} 
 

 
.sunco-listed li:nth-child(1) { 
 
    list-style: none; 
 
}

<div class="sunco-listed"> 
 
    <ul> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    </ul> 
 
</div>

Toute aide/aide serait très appréciée .

Answer 1

flex sur le parent conserve les balles list-item, avec justify-content: center et flex-wrap: wrap donc ils vont envelopper la largeur limitée, puis utilisez :first-child et :last-child pour le premier/dernier effet.

.sunco-listed { 
 
    width: 500px; 
 
} 
 

 
.sunco-listed ul { 
 
    justify-content: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.sunco-listed li { 
 
    padding-right: 25px; 
 
} 
 

 
.sunco-listed li:first-child { 
 
    list-style: none; 
 
} 
 

 
.sunco-listed li:last-child { 
 
    font-weight: bold; 
 
}

<div class="sunco-listed"> 
 
    <ul> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    <li>Spare parts 1</li> 
 
    </ul> 
 
</div>