изменение размера кнопки через CSS - PullRequest
Новая
       18

изменение размера кнопки через CSS

3 голосов
/ 05 сентября 2011

Я использую 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'});

Ответы [ 3 ]

7 голосов
/ 05 сентября 2011

Live Пример:

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>
1 голос
/ 05 сентября 2011

Сделал небольшой тест для вас, может быть, это поможет вам начать

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

просто кнопка ввода и немного CSS

Обновлено

Добавлен пример с отлично работающей JQuery 1.6.2

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

0 голосов
/ 05 сентября 2011

Кнопка может быть элементом inline. Сделай это inline-block: 

display: inline-block;
...