箇条書きの中心リストを表示

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

flexので、彼らは最後の/最初の効果のために:first-childと:last-childを使用し、その後、限られた幅でラップしますjustify-content: centerとflex-wrap: wrapで、リスト項目の弾丸を保持します。

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