jquery-mobile - 增加 jQuery Mobile 按钮的高度

Question

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

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

还有另一种方法可以做到这一点吗？也许使用 jQuery 动态应用一个新的高度，然后调用一个函数来重绘按钮？

score 11 · Accepted Answer

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

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

但是请确保在加载 jquery 移动 css 之后 css 正在发生（特别是： jquery.mobile.structure.css ）

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

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

如果它仍然给你带来麻烦，你总是可以（不推荐）使用 !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）。

score 4 · Accepted Answer

下面的代码对我有用。如果您的按钮是：

    <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; }

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

2 回答 2