list - 在固定宽度的 div 上展开元素？

Question

有没有办法在 div 中展开元素（例如：<li> 在 <ul> 中）？

EG：我有 3 个元素，所以它们都得到 30%

EG：我有 5 个元素，所以他们得到 20%

做这个的最好方式是什么？

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>

Answer 2

设置子元素的显式宽度并相应地向左或向右浮动。

Answer 3

display: inline-table;

再一次，我的回答是在提出问题 5 年后才回答，

但我发现了这个（优雅的）夜间解决方案并分享它以供参考，以及一般的福利和知识。