当宽度变化时，空间列表项均匀内联答案

【问题标题】：Space list items evenly inline when their width varies当宽度变化时，空间列表项均匀内联
【发布时间】：2015-08-06 02:37:20
【问题描述】：

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

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

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

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

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

【问题讨论】：

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

标签： html css twitter-bootstrap html-lists spacing

【解决方案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

【讨论】：