你如何调整 jQuery 按钮的大小？答案

【问题标题】：How do you size the jQuery Button?你如何调整 jQuery 按钮的大小？
【发布时间】：2014-12-24 04:08:02
【问题描述】：

我正在使用 jQuery UI Button 控件，但似乎无法调整大小（宽度和高度）。这是API documentation。我尝试在其上设置 STYLE 属性，但随后 LABEL 未正确居中。谢谢。

【问题讨论】：

我只是试图通过萤火虫给它一个宽度，它可以正常工作并居中。
宽度有效，但高度无效。要更改高度，请按照以下建议使用 padding-top 和 padding-bottom。

【解决方案1】：

在 style 属性中试试这个：

width: 300px;
padding-top: 10px;
padding-bottom: 10px;

或

$(element).css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px' });

【讨论】：

谢谢，雅各布。我想让我感到困惑的部分是在 Button 控件中没有内置的设置方法。换句话说，您可以设置按钮的 width="100px" 和 height="25px"，它会自动为 LABEL 计算正确的 padding-top/bottom。
这是个问题吗？设置高度不起作用，因为标签不是垂直居中在按钮上，而是使用填充偏移。因此，要设置不同的高度，您必须使用 padding-top 和 padding-bottom。
不，更多关于Button控件的评论。但现在我明白了它是如何工作的。谢谢:)

【解决方案2】：

通常：

$(theElement).css('height','...px').css('width','...px');

【讨论】：

你也可以传递.css()一个对象：.css({ height:10, width:10})
还有 .height('Xpx') 也是（我想是的）

【解决方案3】：

您可以设置.ui-button.ui-widget 的样式（没有空格，必须有两个类）。（确保您的样式表出现在 jquery ui 的下方）。您还可以设置样式

.ui-button.ui-widget{
     height, width
}

.ui-button.ui-widget .ui-button-text{
    line-height, font-size
}

【讨论】：

【解决方案4】：

这是使 jquery UI 按钮具有相同宽度的解决方案。首先我需要一个方法来获得最大宽度。

var greatestWidth = 0;   // Stores the greatest width
function getMaxWidth() {
    var theWidth = $(this).width();   // Grab the current width

    if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
        greatestWidth = theWidth;     //    set greatestWidth to theWidth
    }
}

然后我在连接按钮并设置大小后调用此方法。例子

  $('.selector')
        .button()
        .each(getMaxWidth);
  $('.selector').width(greatestWidth);

【讨论】：

【解决方案5】：

我发现在按钮标签周围放置<small></small> 有很大帮助。这仅在某些情况下有益，但它帮助我减少了我正在从事的项目的规模。

【讨论】：

已修复...必须添加回提示才能使我最初放置的内容显示出来。

【解决方案6】：

您可以使用相对字体大小设置元素的样式。如果您的按钮具有自定义类“buttonStyle”，则将其添加到 CSS

.buttonStyle{
 font-size:0.8em;
}

【讨论】：

【解决方案7】：

根据本文档http://api.jquery.com/height/，以下内容适用于：

$('#mybutton').button({ icons: { primary: "ui-icon-plus" }, text: false}).height(20);

【讨论】：