通過CSS調整按鈕大小

我使用jquery mobile來生成我的按鈕，並且我有一個CSS代碼來改變它的設計，但無論我在寬度和高度上放置什麼值，按鈕的大小都不會改變，但它相對依賴於標籤的字體大小。我怎樣才能改變這個，所以我可以改變按鈕的大小，而不考慮標籤的字體大小？通過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'});

來源

2011-09-05 Chinchan Zu

你可以把這些樣式的樣式表。 – Blender

這是否有所作爲？我試過但結果是一樣的 –

他們應該有相同的結果，但我發現樣式表更可讀。只是個人喜好（它會幫助關閉JS的人）。 – Blender

直播示例：

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>

來源

2011-09-05 13:07:21

hi phill！非常感謝您的幫助！會嘗試這個！還有一件事...我還需要調整它們的寬度，但它似乎不起作用 –

該示例不起作用？ –

哦，對不起，我的意思是身高。該示例可以調整寬度，但是當我嘗試添加高度並調整它不會更新高度 –