顯示項目符號集中列表

Question

我在顯示項目符號列表時出現問題，如圖像附件鏈接上的內容。我已經嘗試過幾乎可以CSS組合，但無法達到我想要什麼：

我的代碼是這樣的：

.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>

任何援助/幫助將不勝感激。

Answer 1

父將保留列表項子彈，用justify-content: center和flex-wrap: wrapflex所以他們會在有限的寬度包裹，然後用:first-child和:last-child第一/最後的效果。

.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>