Html 当宽度变化时，将列表项均匀地排列在一起

我有5个标签显示在一行中。我希望它们彼此间隔均匀。当它们的宽度都相同时，我可以使用以下css来实现这一点：

li{
margin-left: 2%;
width: 18%;
}

然而，当我改变宽度时，它会把一切都抛在脑后。每一个的宽度是不同的，不再以百分比为基础，所以我不能使用这种方法。有人知道我现在如何在一行上均匀地排列它们吗

下面是一个代码笔，显示了它现在的位置：

flexbox可以做到这一点

ul {
  display: flex;
  justify-content: space-between;
}

保险商实验室{ 显示器：flex； 证明内容：之间的空间； } 1.未清余额{ 宽度：210px； 背景色：RGBA0136204.3； } 1.信用证已支付{ 宽度：200px； 背景色：RGBA0136204.3； } .批准{ 宽度：130px； 背景色：RGBA0136204.3； } .否认{ 宽度：110px； 背景色：RGBA0136204.3； } .该付款了{ 宽度：205px； 背景色：RGBA0136204.3； } .徽章{ 左边距：21px； } 未清余额20美元 信用卡支付总额为100美元 核准12 拒绝2 平均支付时间67天

---

澄清：您希望每个零件之间的间距相同，而不是每个零件占用相同的空间（包括填充）？您必须使用列表，还是允许使用另一组元素？另一组元素可以。我只是想让每个项目之间的间距相同，而项目的宽度会有所不同。