Button 通过CSS调整按钮大小

我使用jquery mobile生成我的按钮，下面有一个CSS代码来更改其设计，但无论我在宽度和高度中输入什么值，按钮的大小都不会改变，但它相对依赖于标签的字体大小。如何更改此选项，以便更改按钮大小而不考虑标签的字体大小

$("#ui-1").css({'position':'absolute','left':'27.0px','top':'51.0px','width':'120.0px','height':'30.0px',});
$("#ui-1 .ui-btn-text").css({'font-family':'"Calibri","Arial","Sans Serif"','font-size':'0.75em','color':'black','text-align':'left','wordwrap':'normal','text-shadow':'1px 1px 1px #FFFFFF'});

该按钮可能是一个

内联
元素。使其成为
内联块
：

display: inline-block;

为你做了一个小测试，也许它会帮助你起步


只需一个输入按钮和一点css

已更新

添加了一个jQuery1.6.2运行良好的示例

现场示例：


（宽度）
（高度）

JS:

更新：（我想这就是你要找的）

HTML:




您可以将这些样式放在样式表中。这有区别吗？我试过了，但结果是一样的。他们应该有相同的结果，但我发现样式表更具可读性。只是个人喜好（这将帮助关闭JS的人）。嗨，本杰明！这是有效的。。。但我的问题是我需要使用jquerymobile来应用按钮UI的外观。当我应用jQueryMobileCSS和javascript时，它似乎没有覆盖csshi phill！非常感谢你的帮助！我要试试这个！还有一件事。。。我还需要调整它们的宽度，但它似乎不起作用哦，对不起，我指的是高度。该示例可以调整宽度，但当我尝试添加高度并进行调整时，它不会更新高度。我已添加了另一个示例链接，并更新了我的答案以获得高度。phil我再次返回。我只是想问一下，我被你的例子中显示的垂直滚动条所困扰，它显示在我的应用程序中。你知道我怎样才能消除它吗？您还可以向我解释一下为什么$（'#theButton1'）.parent（）.css（'width'，'75%'）需要首先访问父对象吗？非常感谢你能给我一个你申请的链接吗？很难从一个问题中调试正在发生的事情。至于访问父元素，jQM添加了一层html和css，以获得所需的效果、外观和功能。如果您使用FF的Chrome并查看站点，您可以使用调试器查看所有添加的代码，并从那里开始工作。
// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>