Spread out elements over a fixed width div?

Question

Is there way to spread out elements, (eg: <li>'s inside a <ul>), within a div?

EG: I have 3 elements, so they all get 30%

EG: I have 5 elements, so they get 20%

What is the best way to do this?

Answer 1

html,
body {
  padding: 0;
  margin: 0;
}
ul.flatList {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.flatList li {
  width: 33.3%;
  display: inline;
  float: left;
  text-align: center;
}

<ul class="flatList">
  <li>left</li>
  <li>middle</li>
  <li>right</li>
</ul>