1

所以这里详细介绍了如何通过覆盖页面上的类来删除按钮上的填充：Can the button padding beadjusted in Jquery Mobile?

但是我该怎么做：

.ui-btn-inner {
padding: 0;}

并有选择地将其应用于一个按钮，即：

<button data-icon="false" onclick="alert('clicked me')">Button Name</button>

做这样的事情是行不通的：

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>

想法？创造性的解决方案？

谢谢

4

3 回答 3

5

只需为该按钮设置一个新类，然后如下更改子类。

HTML：

<a href"#" data-role="button" class="myClass">Text</a>

CSS：

.myClass .ui-btn-inner{
    padding: 0px;
}
于 2012-11-03T17:04:34.723 回答
3

我想我终于找到了解决方案（现在一直在尝试解决）！

使用 CSS 的“级联”部分来帮助您。例如，如果您的按钮使用主题“a”，则可以将 .ui-btn-inner 的填充规则仅应用于主题为“a”的按钮。只需在您要更改的类前面加上主题属性即可。

HTML：
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

CSS：
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{ padding: 0px; }

如您所见，这意味着您必须为按钮的每个状态创建规则，否则当您触摸按钮时，填充将在瞬间返回。

只需将不同的主题（例如“b”）应用于应保留其填充的按钮。使用这种类型的 CSS 继承，您可以完全疯狂地使用按钮。

您可以拥有无​​限数量的主题。我去主题滚轮并为字母表中的每个字母创建一个默认主题。然后，只需用 CSS 覆盖它们即可。

当我尝试将 jQuery Mobile 用于工作项目时，这是一个很大的症结所在。他们已经有了 UI 设计，我的任务是让 jQuery Mobile 完全匹配它。

于 2012-09-26T16:42:44.960 回答
0

我只是想让图标显示没有边框或背景，所以我使用了你的示例，但是图标向上移动了，所以我用它来重新定位它：

.ui-btn-up-mytheme .ui-btn-inner, 
.ui-btn-hover-mytheme .ui-btn-inner, 
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}

html标记：

<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
 data-theme="mytheme" data-shadow="false"  ></a>
于 2013-03-30T23:58:43.187 回答