Question

我有三个按钮，我想每个按钮占用相同的宽度，并合并占据其包含div的整个宽度。有时其中一个按钮会被隐藏，我希望其他两个按钮仍占据容器的整个宽度，每个按钮的宽度都相同。

我可以运行一些javascript，当第三个按钮显示和隐藏时，它会在50％和33.3％之间来回改变宽度，但我宁愿在纯CSS中执行此操作。

我如何设置这些按钮（及其容器）的样式，使它们总是占据宽度的100％，并且每个宽度都相同，无论它们有多少或几乎没有可见？

到目前为止我所拥有的：

<div class="btn-group" style="width: 100%;">
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;">FAIL</button>
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button>
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button>
</div>

Answer 1

在父级上设置flex并在子级上使用flex-grow: 1; flex-basis: 0;（或简称为flex: 1 0 0;），这样他们就可以均匀地占用父级的所有空间。

＆＃13;

$('#button').on('click',function() {
  $('#foo').toggleClass('hide');
})

＆＃13;

.flex {
  display: flex;
}
.flex > button {
  flex: 1 0 0;
  background: #eee;
}

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click</button>

<div class="btn-group flex" style="width: 100%;">
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;" id="foo">FAIL</button>
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button>
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button>
</div>

＆＃13;

Answer 2

Flexbox对这些事情很有帮助。只需将display:flex添加到父容器，然后将flex-grow:1添加到按钮。

.btn-group {
  display:flex;
}
button {
  flex-grow:1;
}

<div class="btn-group">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

如何让两个HTML元素各占50％的宽度，三个占每个占33％？

2 个答案: