覆盖jquery移动按钮边距

Question

我正在转动我的确定是一个简单的错误。

考虑以下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如下所示：

Answer 1

这是我的谦虚回答。以上答案更多地解释了您的问题。

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

我很高兴我得到了帮助:)。

Answer 2

解决方案1 ​​

这是一个根据标签创建的按钮。

以下是一个有效的例子：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示例的一部分，所以看看。

Answer 3

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

另外，您要在ID #a中添加保证金底部。虽然这是完全有效的，但请查看css的其余部分以查看是否有应用于INPUT的边距，因为应用于标记的样式优于应用于ID的样式。

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