3

简洁版本

如果我不设置水平边距，我的代码运行良好。这就是为什么我的代码使用 .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 上的第一个问题，如果我在使用这个平台时出现错误，请见谅。

4

2 回答 2

2

这是解决方案：

无边距：http: //jsfiddle.net/x33bD/2/

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

基本上，我在class="box"这种风格的按钮周围添加了 div（使用 ）：

.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.width .box() 变成了 .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 + '%');
于 2012-09-06T19:36:18.130 回答
0

如果我理解正确的话。您想为这些按钮设置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
})​
于 2012-09-06T16:32:54.960 回答