javascript - 如何在 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

似乎.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>