Html 在不指定确切大小的情况下使按钮具有相同的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13483331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make buttons same width without specifying exact size?
提问by user291701
I have 5 buttons. I want them to take up the available width of their parent div, each being equally sized:
我有5个按钮。我希望它们占用其父 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>
Is there a way I can do this without having the manually figure out that they each require 20% width? I want to remove a button at runtime, and that means I have to go and update each remaining button again to width=25%.
有没有一种方法可以做到这一点，而无需手动确定它们每个都需要 20% 的宽度？我想在运行时删除一个按钮，这意味着我必须再次将剩余的每个按钮更新为 width=25%。
Just checking if there's a more automated way of doing it.
只是检查是否有更自动化的方法。
Thanks
谢谢
回答by Jukka K. Korpela
The simplest way, and the most robust way, is to use a table:
最简单也是最健壮的方法是使用表：
<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>
(This won't improve your reputation among colleagues these days if they see your code, though it actually solves the problem probably better than any alternative. So you might consider doing the next best thing: use divmarkup and display: tableetc. Fails on old browsers that don't support such CSS features.)
（如果他们现在看到你的代码，这不会提高你在同事中的声誉，尽管它实际上可能比任何替代方法都更好地解决问题。所以你可能会考虑做下一个最好的事情：使用div标记display: table等。在旧浏览器上失败不支持此类 CSS 功能。）
回答by Fasmir
I know this is old, but in case someone else still looking for different method, this is my favorite method: Flexbox!
我知道这是旧的，但如果其他人仍在寻找不同的方法，这是我最喜欢的方法：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 */
}
No matter how many buttons you have, it will resize the button width automatically and fill the div.
无论您有多少个按钮，它都会自动调整按钮宽度并填充div.
Working pen http://codepen.io/anon/pen/YpPdLZ
回答by crowjonah
This is how I'd tackle a situation like this, taking a queue from front-end grid systems. Use classes! When you remove the button, change the class. Here's a fiddle.
这就是我处理这种情况的方式，从前端网格系统中获取队列。使用类！当您删除按钮时，更改类。这是一个小提琴。
Your HTML markup could change to this:
您的 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 like so:
CSS 像这样：
.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}
and jQuery like so, though you'll probably want to use this script as part of whatever process removes the button:
和 jQuery 一样，尽管您可能希望将此脚本用作删除按钮的任何过程的一部分：
$('#remove_one').click(function(){
$('#remove_this').remove();
$('button').each(function(){
$(this).removeClass('fiveup').addClass('fourup');
});
});?
回答by Matey Yanakiev
If we take that their parents are equally sized, you have two solutions to your problem:
如果我们认为他们的父母大小相同，那么您的问题有两种解决方案：
CSS:
CSS：
button { /* You may want to limit the selector */
width: 100%; /* Or any other percent */
}
JavaScript (jQuery):
JavaScript (jQuery):
$("button").width("100%");
Please note, however, that to be sure you also get the exact value, you may want to stick to pixels. If you are willing to use JavaScript, you can also use computed width.
但是请注意，为了确保您也获得准确的值，您可能需要坚持使用像素。如果您愿意使用 JavaScript，也可以使用计算宽度。
Edit
编辑
If you want to use JavaScript without jQuery, try:
如果您想在没有 jQuery 的情况下使用 JavaScript，请尝试：
var buttons = document.getElementsByTagName("button"),
i = 0;
for (; i < buttons.length; i++) {
buttons[i].width = "100%"; //Or any other value
}
Note, however, that .getElementsByTagName()will have to be replaced if you want a more complex query.
但是请注意，.getElementsByTagName()如果您想要更复杂的查询，则必须替换它。
回答by kelly johnson
I think, with jQuery, you could do something more dynamic.
我认为，使用 jQuery，你可以做一些更有活力的事情。
The process for the algorithm would be:
该算法的过程将是：
get the width of the div, put into a variable.
divide the width by the number of buttons and put that answer into a variable.
run a function that creates a button at that width by however many times required.
获取 div 的宽度，放入一个变量中。
将宽度除以按钮的数量并将该答案放入变量中。
运行一个函数，根据需要多次创建该宽度的按钮。
