提升高度

Question

我想增加在jQuery Mobile的创建几个按钮的高度，但CSS像下面不工作：

a[data-role="button"] { 
    height: 200px; 
    font-size: 48px; 
} 

是否有另一种方式做到这一点？也许动态使用jQuery应用一个新的高度，然后调用一个函数来重新绘制按钮？

Answer 1

这个工作对我的jQuery Mobile的应用程序：

.ui-btn { height: 200px; font-size: 48px; } 

但要确保在CSS是移动CSS加载了jQuery后发生的（具体为：jquery.mobile.structure.css）

如果它仍然给你带来麻烦，尝试包裹按钮的容器和使用：

#container-id .ui-btn { height: 200px; font-size: 48px; } 

如果它仍然给你带来麻烦，你总是可以（不推荐）使用的重要声明！

.ui-btn { height: 200px !important; font-size: 48px !important; } 

但同样，是真的不推荐“重要”的声明，我通常只使用他们作为健全性检查，以确保我选择合适的元素，同时调试。

编辑：

如果你想动态路由：

jQuery代码：

$(document).ready(function() { 
    styles = { 'height': '200px', 'font-size': '48px' }; 
    $('.ui-btn').css(styles); 
}); 

应该工作...虽然现在我想想，我认为jQuery Mobile的做一些javascript处理（我知道它把你的标记包装在一个引用当前页面url的div中）。

Answer 2

下面的代码适用于我。如果您的按钮是：

<a href="index.html" data-role="button" data-theme="d" class="big">Big button</a> 

那么大，UI的BTN-内可以有以下类型：

.big { height: 80px;} 
    .big .ui-btn-inner { padding-top:25px; } 

补上空白，使文本似乎是居中对齐。这样，按钮样式不会在全局范围内更改，并且您可以控制要更改按钮的位置。希望它可以帮助别人:)