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 的合理性并扩大其大小。谢谢！

score 1 · Accepted Answer

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

body{
margin:0px !important;
}

score 1 · Accepted Answer

正如 Unknown 所指出的，每个浏览器都有一些默认的 css。在您的 css 文件顶部使用它来重置默认 css 是一种很好的做法；

* {
   margin: 0;
   padding: 0;
}

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

score 1 · Accepted Answer

似乎.ui-content正在添加额外的填充，所以有两个选项。

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

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

3 回答 3