在固定宽度的 div 上展开元素？答案

【问题标题】：Spread out elements over a fixed width div?在固定宽度的 div 上展开元素？
【发布时间】：2009-10-18 16:14:33
【问题描述】：

有没有办法在 div 中分散元素（例如：

在

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

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

最好的方法是什么？

【问题讨论】：

标签： list width fixed fluid

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

【讨论】：

我认为他不想硬编码 33.3%，但宽度应该动态适应 li 元素的数量。
这就是我想要的，是的，但不确定如何
你可以使用一点 Javascript。检查容器的宽度，然后设置每个div的宽度。

【解决方案2】：

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

【讨论】：

【解决方案3】：

display: inline-table;

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

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

【讨论】：