jquery - 使用 jQuery 以百分比形式设置 outerWidth

Question

精简版

如果我不设置水平边距，我的代码运行良好。这就是为什么我的代码使用 .width() 来获取和设置元素宽度，但我不能对 .outerWidth() 做同样的事情，因为它是只读的。有办法设置吗？

长版

我有许多不同宽度的按钮(使用 float: left)，我希望每个按钮都有一个宽度，以便制作一个漂亮且优化的按钮表。

所以我写了这个:

buttons = $('.button-table > button');
maxWidth = Math.max.apply(
    Math,
    buttons.map(function(){
    return $(this).width();
    }).get()
);
columns = Math.floor($('#container').width()/maxWidth);
buttons.width(100/columns+'%');

此代码有效，但如果我为按钮设置水平边距，则最后一个按钮会移动到下一行。

注意:我更喜欢百分比，因为如果我使用这段代码，我经常会看到一些像素留在容器的右端(我可以使用不同的颜色看到它们):

buttons.width(Math.floor($('.button-table').width()/columns));

注意

这是我在 Stack Overflow 上的第一个问题，如果我在使用这个平台时犯了错误，请原谅。

Answer 1

解决方法如下:

无 margin :http://jsfiddle.net/x33bD/2/

边距:http://jsfiddle.net/x33bD/7/

基本上，我在具有这种样式的按钮周围添加了 div(使用 class="box"):

.box {
    float: left;
}
.box button {
    margin-left: auto ;
    margin-right: auto ;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    width: 90%;
    white-space: nowrap;
}

这个 CSS 可能会更好:它可以在不设置宽度的情况下拉伸(stretch)按钮。

jQuery 代码是相同的(buttons 变成了 .box，.width() 变成了 .outerWidth()...):

boxes = $('#container > .box');
maxWidth = Math.max.apply(
Math, boxes.map(function() {
    return $(this).outerWidth();
}).get());
columns = Math.floor($('#container').width() / maxWidth);
boxes.width(100 / columns + '%');