使按钮具有相同的宽度而不指定确切的尺寸

Question

我有五个按钮。我希望它们占据其父 div 的可用宽度，每个 div 的大小相同：

<div style="width: 100%; background-color: red;">
    <button type="button" style="width: 20%;">A</button>
    <button type="button" style="width: 20%;">B</button>
    <button type="button" style="width: 20%;">C</button>
    <button type="button" style="width: 20%;">D</button>
    <button type="button" style="width: 20%;">E</button>
</div>

有没有办法可以做到这一点，而无需手动计算出它们各自需要 20% 的宽度？我想在运行时删除一个按钮，这意味着我必须再次将每个剩余的按钮更新为 width=25%。

我只是检查是否有更自动化的方法。

Answer 1

最简单、最可靠的方法是使用表格：

<style>
.buttons { 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: red; 
}
.buttons button { 
  width: 100%;
}
</style>
<table class=buttons>
 <tr>
    <td><button type="button">A</button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
</table>

（现在，如果同事看到你的代码，这不会提高你在同事中的声誉，尽管它实际上可能比任何其他选择都更好地解决问题。因此，你可能会考虑做下一个最好的事情：使用

div

标记和

display: table

等。在不支持此类 CSS 功能的旧浏览器上失败。）

Answer 2

这是我最喜欢的方法（Flexbox）！ -

<div style="width: 100%; background-color: red;">
    <button type="button">A</button>
    <button type="button">B</button>
    <button type="button">C</button>
    <button type="button">D</button>
    <button type="button">E</button>
</div>

div {
  display: flex;
  justify-content: space-around;
}
button {
  width: 100%;
  margin: 5px; /* or whatever you like */
}

无论您有多少个按钮，它都会自动调整按钮宽度并填充

div

。

工作笔：http://codepen.io/anon/pen/YpPdLZ

Answer 3

这就是我处理这种情况的方法，从前端网格系统中获取队列。使用类！当您删除按钮时，更改类别。 这是一把小提琴。

您的 HTML 标记可能会更改为：

<div>
    <button type="button" class="fiveup">A</button>
    <button type="button" class="fiveup">B</button>
    <button type="button" class="fiveup">C</button>
    <button type="button" class="fiveup">D</button>
    <button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>​

CSS 像这样：

.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}

和 jQuery 一样，尽管您可能希望使用此脚本作为删除按钮的任何过程的一部分：

$('#remove_one').click(function(){
    $('#remove_this').remove();
    $('button').each(function(){
        $(this).removeClass('fiveup').addClass('fourup');
    });
});​

Answer 4

使用 bootstrap 就这么简单

<div class="btn-group-vertical">

</div>

Answer 5

如果我们认为他们的父母大小相同，那么您的问题有两种解决方案：

CSS：

button { /* You may want to limit the selector */
     width: 100%; /* Or any other percent */
}

JavaScript（jQuery）：

$("button").width("100%");

但是请注意，为了确保您也获得准确的值，您可能需要坚持像素。如果你愿意使用 JavaScript，你也可以使用计算宽度。

---

编辑

如果您想使用 JavaScript 而不使用 jQuery，请尝试：

var buttons = document.getElementsByTagName("button"),
    i = 0;
for (; i < buttons.length; i++) {
     buttons[i].width = "100%"; //Or any other value
}

但请注意，如果您想要更复杂的查询，则必须替换

.getElementsByTagName()

。

Answer 6

如果您可以定义最小宽度和最大宽度，这是一个非常简单的解决方案。

div {
  display: inline-block;
  min-width: 100px;
  max-width: 200px;
  white-space: nowrap; 
}
button { 
  width: 100%;
  white-space: initial; 
}

<div>
    <button type="button">Short</button>
    <button type="button">Short</button>
</div>

<hr />

<div>
    <button type="button">This is a long button</button>
    <button type="button">Short button</button>
</div>

<hr />

<div>
    <button type="button">Short</button>
    <button type="button">This is a really really long button</button>
</div>

Answer 7

我认为，使用 jQuery，你可以做一些更动态的事情。

算法的过程是：

1. 获取div的宽度，放入变量中。

2. 将宽度除以按钮数量，并将结果放入变量中。

3. 运行一个函数，根据需要多次创建该宽度的按钮。