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

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

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

• 使浏览器模拟表行为
• 使用Flexible Box布局

例如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;
}

Flexible Box布局是一种更现代化的解决方案,现在它得到了广泛的支持:

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

Answer 2

不幸的是，我认为你必须使用表格来做到这一点。As<td>调整其自身大小以适合整个宽度。

华泰