html - 空格列表项在宽度变化时均匀内联

Question

我连续显示了 5 个标签。我希望它们彼此间隔均匀。当它们的宽度都相同时，我可以使用以下 css 来做到这一点:

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

但是，当我更改宽度时，它会抛出所有内容。每个的宽度都不同，不再基于百分比，所以我不能使用这种方法。现在有人知道如何将它们均匀地排在一行上吗？

这是一个代码笔，展示了它现在的样子:

http://codepen.io/anon/pen/KpJvar

Answer 1

flexbox 可以做到这一点。

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

ul {
  display: flex;
  justify-content: space-between;
}
.outstanding-balance {
  width: 210px;
  background-color: rgba(0, 136, 204, .3);
}
.credit-paid {
  width: 200px;
  background-color: rgba(0, 136, 204, .3);
}
.approved {
  width: 130px;
  background-color: rgba(0, 136, 204, .3);
}
.denied {
  width: 110px;
  background-color: rgba(0, 136, 204, .3);
}
.time-to-pay {
  width: 205px;
  background-color: rgba(0, 136, 204, .3);
}
.badge {
  margin-left: 21px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
  <li><a class="outstanding-balance">Outstanding Balance <span class="badge">$20</span></a>
  </li>
  <li><a class="credit-paid">Total Credit Paid <span class="badge">$100</span></a>
  </li>
  <li><a class="approved">Approved <span class="badge">12</span></a>
  </li>
  <li><a class="denied">Denied <span class="badge">2</span></a>
  </li>
  <li><a class="time-to-pay">Avg. time to pay <span class="badge">67 Days</span></a>
  </li>
</ul>

Codepen Demo