如何在jQuery-Mobile中对齐页面内容中的div？

Question

我在jQuery-Mobile页面div中有一个div，如下所示： http : //jsfiddle.net/UFOcode/gtXzb/1/

<div data-role="page" data-pagination="1">
    <div data-role="content">
     <div class="iBorder">

     </div>
    </div>
</div>

我想在左侧对齐类iBorder并将其大小扩展到屏幕框架。 我不知道为什么左右总是有小间隙

这是一些尝试的CSS

.iBorder{
height: 300px;
width: auto;
margin: 0;
background-color: brown;    
top: 0;
left: 0;
}

这是屏幕截图

请帮助证明iBorder div合理并扩大其大小。 谢谢！

Answer 1

您的用户代理设置了默认CSS，请尝试删除或覆盖这些默认值。 在您的情况下，将此添加到您的CSS：

body{
margin:0px !important;
}

Answer 2

正如Unknown所指出的那样，每个浏览器都有一些默认的CSS。 最好在css文件的顶部使用此选项来重置默认css。

* {
   margin: 0;
   padding: 0;
}

小提琴 （在 小提琴中 使用!important ，否则jQuery Mobile CSS会覆盖样式）

Answer 3

似乎.ui-content添加了额外的填充，因此有两个选择。

覆盖jQuery UI CSS：

.ui-content {
    padding: 0px !important;
}

更改HTML标记，以避免使用.ui-content：

<div data-role="page" data-pagination="1">
     <div class="iBorder">...</div>
</div>