增加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).