显示项目符号居中的列表

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 将保留列表项项目符号，带有justify-content: center 和flex-wrap: wrap，因此它们将以有限的宽度换行，然后使用: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>