调整通过CSS的一个按钮 [英] resizing a BUTTON through CSS
本文介绍了调整通过CSS的一个按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用jQuery移动来生成我的按钮,我有以下CSS code改变其设计,但无论我提出什么样的价值在宽度和高度按钮的大小不会改变,但它是相对取决于标签的字体大小。我怎样才能改变这个,所以我可以改变标签的字体大小的按钮大小irregardless?
<$p$p><$c$c>$(\"#ui-1\").css({'position':'absolute','left':'27.0px','top':'51.0px','width':'120.0px','height':'30.0px',});$(#UI-1的.ui-BTN-文本),CSS({FONT-FAMILY'。'宋体,Arial字体,三世Serif\"','font-size':'0.75em','color':'black','text-align':'left','wordwrap':'normal','text-shadow':'1px 1px的1px的#FFFFFF'});
解决方案
活生生的例子:
JS:
//对于所有的按钮都使用这样的事情
$('。UI-BTN')的CSS('宽','50%)。//对于个别按键使用这样的
。$('#theButton1')父()的CSS('宽','75%');//或者这样的HREF数据角色按钮
$('#hrefButton4')的CSS('宽','45%');
更新:(我认为这是你在找什么)
//这改变了所有按钮的高度
$('UI的BTN-文本)的CSS(字体大小,50像素)。//这将更改单个元素的高度
。$('#hrefButton3')儿童()儿童()的CSS('字号','30像素');
HTML
&LT; DIV数据角色=页面ID =家&GT;
&LT; DIV数据角色=内容&GT;
&LT;输入类型=按钮ID =theButton1VALUE =preSS我1/&GT;
&LT;输入类型=按钮ID =theButton2VALUE =preSS我2/&GT;
&LT;输入类型=按钮ID =theButton3VALUE =preSS我3/&GT;
&LT;输入类型=按钮ID =theButton4VALUE =preSS我4/&GT;
&LT; BR /&GT;
&所述; A HREF =#的数据角色=键的id =hrefButton1&GT; HREF我1所述; / A&GT;
&所述; A HREF =#的数据角色=键的id =hrefButton2&GT; HREF我2'; / A&GT;
&所述; A HREF =#的数据角色=键的id =hrefButton3&GT; HREF我3'; / A&GT;
&所述; A HREF =#的数据角色=键的id =hrefButton4&GT; HREF我4℃; / A&GT;
&LT; / DIV&GT;
&LT; / DIV&GT;
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屋!
查看全文