CSS - 动态填充以扩展 div 以填充动态宽度答案

【问题标题】：CSS - Dynamic padding to expand divs to fill a dynamic widthCSS - 动态填充以扩展 div 以填充动态宽度
【发布时间】：2015-05-27 00:16:23
【问题描述】：

所以我在具有可变宽度的 div 中有可变数量的元素。里面的元素之间有一个固定的间距，5px，但是每个元素都需要扩展，用padding填满外层div空间的全宽，这样就可以让文字居中了。

例子：

.button-container{
  width: 100%;
  height: 50px;
}
.button-container .button{
  min-width: 75px;
  display: inline-block;
  text-align: center;
  border: 1px solid #FF0000;
}
.button-container .button + .button-container .button{
  margin-left: 5px;
}

<div class='button-container'>
  <div class='button'>B1</div>
  <div class='button'>B2</div>
  <div class='button'>B3</div>
  <div class='button'>B4</div>
</div>

那么如何使按钮类元素内部的填充具有动态的左右填充来填充按钮容器类 div 的空间？

理想情况下，该解决方案将是一个纯 CSS 解决方案，因为我不想让 jQuery 来做间距。

【问题讨论】：

所以您希望按钮分布在父级的整个宽度上，并且只调整它们之间的空间，或者您希望按钮适应宽度？
边距是静态的，但是边框内的左右内边距需要展开以填满按钮容器的整个宽度。
在这种情况下，使用 flexbox。但请注意，旧浏览器不支持此功能（afaik IE caniuse.com/#search=flex，因此请为这些浏览器创建后备。 IE10 需要 2012 版的 flexbox 语法。
有一点虽然Divs are not buttons
Paulie_D 的观点非常好。它们仅用于演示目的。

标签： css

【解决方案1】：

CSS 表格可以在这里使用。

.button-container {
  width: 100%;
  height: 50px;
  display: table;
  border-collapse: separate;
  border-spacing: 5px;
}
.button-container .button {
  display: table-cell;
  text-align: center;
  border: 1px solid #FF0000;
  vertical-align: middle;
}

<div class='button-container'>
  <div class='button'>B1</div>
  <div class='button'>B2</div>
  <div class='button'>B3</div>
  <div class='button'>B4</div>
</div>

【讨论】：

表格布局与我通常认为的相差甚远，即使它完全有效，我也可能不会有这个想法。针对这个特定问题的一个好的并且可能更兼容的解决方案！
我当然不会使用 actual 表，但如果 CSS 表可以实现它（在没有完整的 flexbox 支持的情况下）我认为它是一个有效的选项。这就是它存在的原因:)
同意。如果我可以使用 flexbox，那可能是我的首选，但由于我也需要支持 IE9，这将是我使用的解决方案。非常感谢。

【解决方案2】：

你可以使用弹性框：

.button-container {
  display: flex; /* Magic begins */
}
.button-container > .button {
  flex: 1; /* Distribute the width equally */
  text-align: center;
  margin-left: 5px;
  border: 1px solid #FF0000;
}
.button-container > .button:first-child {
  margin-left: 0;
}

<div class='button-container'>
  <div class='button'>B1</div>
  <div class='button'>B2</div>
  <div class='button'>B3</div>
  <div class='button'>B4</div>
</div>

【讨论】：

我第一次听说 flex 属性。看起来很方便。有什么方法可以让它与 IE 7-9 一起工作？
@Lianite AFAIK 不可能，很遗憾。
感谢您的建议。当我们不再需要支持旧版本的 IE 时，一定会记住这一点。