如何在jQuery-Mobile中将div内容与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;
}

Fiddle （在小提琴中使用!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>