html - 显示项目符号居中的列表

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>