html - jQuery Mobile - 如何在页面周围放置实线边框

Question

我正在使用 jQuery Mobile 构建我的第一个应用程序，并且从一开始就卡住了。下面是我所追求的屏幕截图。我把内容涂黑了。

如何在持久的框架周围添加实线边框？

Answer 1

我自己解决了:

.ui-mobile [data-role="page"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    height: 100% !important;
}
.ui-mobile [data-role="header"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-bottom: none !important;
}
.ui-mobile [data-role="footer"] {
    box-sizing: border-box !important;
    border: 10px solid #e6e6e6 !important;
    border-top: none !important;
}

和

<div data-role="page">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">
        <p>Hello world</p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>My Title</h1>
    </div><!-- /footer -->
</div><!-- /page -->

到目前为止，执行此操作时没有遇到任何问题，如果以后我遇到此代码的问题，我也不会感到惊讶。