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

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

1 个答案: