14

我有五个按钮。我希望他们占据其父 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%。

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

4

6 回答 6

16

最简单也是最稳健的方法是使用表格：

<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 功能。）

于 2012-11-20T23:10:57.580 回答
13

这是我最喜欢的方法（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

于 2016-11-07T09:26:29.110 回答
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');
    });
});​
于 2012-11-20T22:44:33.007 回答
1

使用引导程序，它就像

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

</div>
于 2021-10-06T08:17:25.847 回答
0

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

CSS：

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

JavaScript (jQuery):

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

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

编辑

如果您想在没有 jQuery 的情况下使用 JavaScript，请尝试：

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

但是请注意，.getElementsByTagName()如果您想要更复杂的查询，则必须替换它。

于 2012-11-20T22:35:04.987 回答
-1

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

该算法的过程将是：

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

  2. 将宽度除以按钮的数量并将该答案放入变量中。

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

于 2012-11-20T22:40:44.920 回答