Space list items evenly inline when their width varies

Question

I have 5 labels that I am displaying in a row. I would like them to be evenly spaced from eachother. When they were all the same width, I was able to do this using the following css:

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

However, when I changed the width it throws everything off. The width of each one is different and not based off the percentage anymore so I can't use this method. Does anybody know how I can space them evenly on one line now?

Here is a codepen showing how it sits now:

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

To clarify: you want the spacing in between each part to be identical, instead of each part taking up the same amount of space (including padding)? — Andrea, Aug 05 '15 at 17:26
Do you have to use a list, or would another set of elements be permissible? — j08691, Aug 05 '15 at 17:38
Another set of elements would be fine. I am just trying to get the spacing between each to be identical, while the width of the items will vary. — cfly24, Aug 05 '15 at 17:42

score 2 · Accepted Answer · answered Aug 05 '15 at 18:37

flexbox can do that.

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

Space list items evenly inline when their width varies

1 Answers1