css - 调整未知数量的元素以填充父容器的宽度

Question

我需要将未知数量的 div(可能限制在 5 个左右)放入父容器中，并始终确保它们均等分配。我不确定这是否可以单独使用 CSS 来完成，但我想我最好问一下。所以如果我们知道使用了 3 个 div:

<style>
  .menu-button { 
    float: left;
    width: 33%;
  }
</style>
<div>
   <div class="menu-button">Button X</div>
   <div class="menu-button">Button Y</div>
   <div class="menu-button">Button Z</div>
</div>

似乎可行，但如果 .menu-button div 的数量未知怎么办？有没有更好的方法让它自动水平调整？

Answer 1

要对任何元素执行此操作，您有两种解决方案:

• 让浏览器模拟表格行为
• 使用灵活的盒子布局

例如，要构建一个水平菜单，每个 li 元素的宽度都相等，使用以下 HTML 代码:

<div id="menu">
  <ul>
    <li><a href="#">First Element</a></li>
    <li><a href="#">Second Element</a></li>
    <li><a href="#">Third Element</a></li>
    ...
    <li><a href="#">N Element</a></li>
  </ul>
</div>

使用表格布局，CSS 代码看起来像这样:

#menu{
  width: 100%; /* for instance */
  display: table;
  table-layout: fixed;
}
#menu ul{
  display: table-row;
}
#menu ul li{
  display: table-cell;
}

灵活的盒子布局是一种更现代的解决方案，它是 pretty widely supported现在:

#menu{
  width: 100%; /* for instance */
}
#menu ul{
  display: flex;
  flex-flow: row;
}
#menu ul li{
  flex-grow: 1;
}