使按钮宽度相同而不指定确切大小？

I have 5 buttons. I want them to take up the available width of their parent div, each being equally sized:

我有5个按钮。我希望它们占用父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>

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

5 个解决方案

#1

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 div markup and display: table etc. Fails on old browsers that don’t support such CSS features.)

(如果他们看到你的代码,这几天不会提高你的同事的声誉,虽然它实际上可能比任何替代方案更好地解决问题。所以你可能会考虑做下一个最好的事情:使用div标记和显示:表等失败在不支持此类CSS功能的旧浏览器上。)

#2

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');
    });
});

#3

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

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

#4

If we take that their parents are equally sized, you have two solutions to your problem:

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

CSS:

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

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()。

#5

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.

获取div的宽度,放入变量。
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.

运行一个函数,无论多少次都需要在该宽度上创建一个按钮。

#1