3

我在旋转我的车轮，我确信这是一个简单的错误。

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

渲染的用户界面

4

4 回答 4

7

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

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

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

于 2013-03-27T19:28:09.997 回答
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');

Live 示例是顶级 jsFiddle 示例的一部分，因此请看一下。

于 2013-03-27T18:46:26.650 回答
1

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

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

于 2013-03-27T18:26:55.660 回答
1

也可以在每个按钮元素周围设置 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;
}
于 2013-05-23T11:37:40.130 回答