Question

这是一个小提琴----＆gt; http://jsfiddle.net/bagofmilk/4RAuL/＆lt; ----

将jQuery 1.9.1与jQM 1.3.2一起使用

我在这样的页脚设置中有按钮：

 <div data-role='footer' data-position='fixed' data-inline='true'>
    <div class='ui-grid-d' style='width:100%;margin:0 auto;text-align:center;'>
        <div class='ui-block-a'>
            <a href='#'  data-inline='true' data-role='button' data-corner='false'>A</a></div>
        <div class='ui-block-b'>
            <a href='#'  data-inline='true' data-role='button' data-corner='false'>B</a></div>
        <div class='ui-block-c'>
             <a href='#'  data-inline='true' data-role='button' data-corner='false'>C</a></div>
        <div class='ui-block-d'>
            <select data-icon='grid' data-iconpos='notext' data-mini='true' data-inline='true' id='thissel'><option>D</option><option>2</option></select></div>
        <div class='ui-block-e'>
        <a href='#'  data-inline='true' data-role='button' data-corner='false' >&rarr;</a></div>
   </div>
 </div>

如果你注意到，你会看到由＆lt; a＆gt;包围的按钮。标签大于仅具有图标的按钮。我想让所有按钮与按钮的大小相同，并带有icon ='grid'。

我试过了：

.ui-btn {padding:0px;}

但它无效

有什么想法吗？

jsfiddle ----＆gt; http://jsfiddle.net/bagofmilk/4RAuL/＆lt; ----

Answer 1

工作示例：http://jsfiddle.net/Gajotres/yFEsW/

CSS：

.ui-block-d .ui-select .ui-btn {
    margin-top: 2px !important;
    padding: 0.15em 5px 0.25em !important;
}

.ui-block-d .ui-select .ui-btn .ui-icon{
    margin-top: 5px !important;
}

或您的版本：http://jsfiddle.net/Gajotres/wye9H/

.ui-block-a a .ui-btn-inner, .ui-block-b a .ui-btn-inner, .ui-block-c a .ui-btn-inner, .ui-block-e a .ui-btn-inner {
    padding: 0 5px !important;
}

.ui-block-d div .ui-btn {
    margin-top: -2px !important;
}

对我来说，第一个看起来更好。

jQuery Mobile按钮大小相同

1 个答案:

CSS：