通过 CSS 调整按钮的大小 [英] resizing a BUTTON through CSS

问题描述

我使用 jquery mobile 来生成我的按钮，我在下面有一个 CSS 代码来改变它的设计，但是无论我在 width 和 height 中输入什么值，按钮的大小都不会改变，但它相对依赖于标签的字体大小.如何更改此设置，以便无论标签的字体大小如何都可以更改按钮大小?

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

解决方案

Live Example:

• http://jsfiddle.net/3EgrW/21/(宽度)
• http://jsfiddle.net/3EgrW/35/(高度)

JS:

//对于所有按钮使用类似这样的东西$('.ui-btn').css('width','50%');//对于单个按钮，使用类似这样的东西$('#theButton1').parent().css('width', '75%');//或者这对于 HREF 数据角色按钮$('#hrefButton4').css('width', '45%');

更新:(我认为这就是你要找的)

//这会改变所有按钮的高度$('.ui-btn-text').css('font-size','50px');//这会改变单个元素的高度$('#hrefButton3').children().children().css('font-size','30px');

HTML:

<div data-role="内容"><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>

I use jquery mobile to generate my buttons and I have a CSS code below to change its design but no matter what value i put in width and height the size of the button doesn't change, but it is relatively dependent on the font size of the label. How can I change this so I can change the button size irregardless of the font size of the label?

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

解决方案

Live Example:

• http://jsfiddle.net/3EgrW/21/ (Width)
• http://jsfiddle.net/3EgrW/35/ (Height)

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

UPDATE: (I think this is what you're looking for)

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

这篇关于通过 CSS 调整按钮的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！