通过CSS调整button大小

我使用jQuery的手机来生成我的button，我有一个CSS代码下面来改变它的devise，但无论我把宽度和高度放在什么值的button的大小不会改变，但它是相对依赖于字体大小标签。 我怎样才能改变这个，所以我可以改变button的大小，而不考虑标签的字体大小？

$("#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'}); 

Answer 1

现场示例：

• http://jsfiddle.net/3EgrW/21/ （宽度）
• http://jsfiddle.net/3EgrW/35/ （高度）

JS：

 // 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'); 

HTML：

 <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> 

Answer 2

为你做了一个小testing，也许它会帮助你开始

http://jsfiddle.net/3EgrW/1/

只是一个inputbutton和一个小小的CSS

更新

添加了一个例子与JQuery 1.6.2工作正常

http://jsfiddle.net/3EgrW/2/

Answer 3

该button可能是一个inline元素。 使它成为一个inline-block ：

 display: inline-block;