Question

所以我在div中有一个可变数量的元素，它们具有可变宽度。里面的元素之间有一个固定的空间，5px，但是每个元素需要扩展以用填充填充外部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来做间距。

Answer 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>

Answer 2

您可以使用flexbox：

.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>

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

2 个答案: