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

以下是解决方案：

无保证金：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可能会更好：它可以在不设置宽度的情况下拉伸按钮。

jQuery代码是相同的（buttons becames .box，。width（）becames .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 + '%');

Answer 2

如果我理解正确的话。您想为这些按钮设置width + margin。

我们走了。

你可能已经知道了。 total width = margin + border + padding + content width

所以，在你的情况下，你可以这样做。

var buttons = $('.button-table > button'),
// filter out the widest element
    widest  = buttons.sort(function(a, b){ return $(a).outerWidth() - $(b).outerWidth(); }).pop(),
    btn_width   = Math.floor($('.button-table').width()/columns),
    btn_margin  = parseInt($(widest).css('margin-left')) + parseInt($(widest).css('margin-right'));

// set actual width
button.css({
    width: btn_width - btn_margin
})

使用jQuery设置outerWidth的百分比

短版

长版

2 个答案: