Question

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

Answer 1

在style属性中尝试：

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

或

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

Answer 2

正常：

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

Answer 3

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

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

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

Answer 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);

Answer 5

我发现将<small></small>放在按钮标签周围会有很大帮助。这在某些情况下是有益的，但它帮助我缩小了我正在进行的项目的规模。

Answer 6

您可以使用相对字体大小设置元素的样式。如果你的按钮有自定义类'buttonStyle'，那么将它添加到CSS

.buttonStyle{
 font-size:0.8em;
}

Answer 7

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

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

你如何调整jQuery Button的大小？

7 个答案: