增加jQuery Mobile按钮的高度

Question

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

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

还有其他办法吗？也许使用jQuery动态应用一个新的高度，然后调用一个函数来重绘按钮？

Answer 1

这适用于我的jQuery移动应用程序：

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

但是确保在加载jquery mobile css之后发生了css（具体来说：jquery.mobile.structure.css）

如果它仍然给您带来麻烦，请尝试将按钮包装在容器中并使用：

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

如果STILL给你带来麻烦，你可以随时（不推荐）使用！important语句：

.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处理（我知道它将你的标记包装在div中，并引用当前页面url）。

Answer 2

以下代码对我有用。如果你的按钮是：

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

然后big和ui-btn-inner可以有以下样式：

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

添加了填充，因此文本看起来是居中对齐的。这样，按钮样式不会全局更改，您可以在其中控制要更改按钮的位置。希望它可以帮助某人：）