【问题标题】：Overriding jquery mobile button margins覆盖jquery移动按钮边距
【发布时间】：2013-05-23 19:53:57
【问题描述】：

我确信这是一个简单的错误。

考虑以下jqm（1.3版）视图（在haml中）

#main-header{'data-role' => 'header'}

#main-content{'data-role' => 'content'}   #main-buttons
    %input#a{'type' => 'button', 'name' => 'a', 'value' => 'A'}
    %input#b{'type' => 'button', 'name' => 'b', 'value' => 'B'}

样式表：

#main-buttons {
  margin: 30px;
  margin-top: 160px;
}   

#a {
  margin-bottom: 60px !important;
}

这里我应用于按钮“a”的 margin-bottom 样式没有影响。我的目标是在两个按钮之间添加一些垂直空间。我错过了什么？

渲染后的 UI 如下所示：

【问题讨论】：

尝试改变.ui-btn的风格。
这有帮助。！您可以将此添加为答案，以便我可以标记它。我不明白如何应用到特定 id 的样式不会覆盖类中指定的内容。
那是因为 .ui-btn 是您输入按钮的父级。此外，每个 .ui-btn 覆盖都将覆盖整个 jQM 应用程序。
我理解第二条评论（这就是我不想使用 .ui-btn 覆盖的原因。）不明白为什么 .ui-btn 覆盖会覆盖由 a 标识的特定元素的样式唯一 ID - 对我来说没有意义。
那么我的建议是使用从简单的 a 标签创建的按钮。他们没有这个问题。你可以给他们一个 id 并用它来修改他们。

标签： jquery css html jquery-mobile jquery-mobile-button

【解决方案1】：

这是我谦虚的回答。以上答案详细说明了您的问题。

要覆盖按钮样式，请将您的样式添加到.ui-btn。

很高兴能帮到你:)

【讨论】：

【解决方案2】：

解决方案 1

这是一个从 a 标签创建的按钮。

这是一个工作示例：http://jsfiddle.net/Gajotres/9bPA2/

<div data-role="content">
    <a data-role="button" id="button1">Button 1</a>
    <a data-role="button" id="button2">Button 2</a>
</div>

#button1 {
    margin-bottom: 50px;
}

解决方案 2

这是您正在使用的按钮。不幸的是，你可以使用 css 来修复它，它需要通过 jQuery 来完成，如下所示：

HTML：

<input type="button" value="Button 3" id="button3">
<input type="button" value="Button 4" id="button4">

Javascript：

$('#button3').parent().css('margin-top','50px');
$('#button4').parent().css('margin-top','50px');

现场示例是顶级 jsFiddle 示例的一部分，请看一下。

【讨论】：

不是真的，按钮 id 确实设置为“a”。
看看解决方案2，这将解决您的问题。基本上你不能在你的输入按钮上使用一个 id，因为它是用 jQuery 自定义按钮包装的。所以唯一的解决方案是 jQuery。
嗨 Gajotres，谢谢 - 我不想使用 javascript 来为这样一个简单的场景设置样式。我应该可以为此使用简单的 css 吗？看起来 Omar 上面的评论有效（更改 .ui-btn 的样式）

【解决方案3】：

首先确保您的样式表的链接列在 HTML 页面头部的 jQuery 移动样式表的链接之后。如果两种样式冲突，浏览器将使用第二个样式表（例如下面列出的 css）。

另外，您正在将 margin-bottom 添加到 ID #a。虽然这是完全有效的，但请查看其余的 css 以查看是否有应用于 INPUT 的边距，因为应用于标签的样式优于应用于 ID 的样式。

【讨论】：

谢谢。我一直认为id在css应用方面的优先级最高。

【解决方案4】：

也可以在每个按钮元素周围设置 div 元素。然后为这些 div 元素设置底部和顶部边距，按钮垂直间隔，因为 div 元素在 DOM 结构中是 jQuery Mobile .ui-btn:s 的父级。

这种方式的边距设置不是为整个应用程序设置的，而只是为这些按钮设置的。

HTML/CSS 示例：

<div class="ButtonDiv">
    <a data-role="button">Button 1</a> 
</div>

<div class="ButtonDiv">
    <a data-role="button">Button 2</a> 
</div>

<div class="ButtonDiv">
    <a data-role="button">Button 3</a> 
</div>


.ButtonDiv {
margin-top: 8px;
margin-bottom: 8px;
}

【讨论】：