Question

我有一个包含以下HTML的页面，并使用JQuery Mobile UI框架。我有2个查询：

1）为什么最后一个元素的底边隐藏？如果我删除标题，它会开始出现。请建议我如何保持标题，使得底边不会隐藏。

2）为什么即使页面加载后加载器仍然可见 - 解决了..我错过了关闭标题

谢谢！

<!DOCTYPE html>
<html>
    <head>
        <title>app</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head>
    <body>
        <header data-role="header">

            <h1>
                My Application</h1>
        </header>


        <article data-role="content">
            <ul data-role="listview" >
                <li><a href="#">
                        <h1>Heading 1</h1>
                        <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/>
                        <p>Select this option to lorum ipsum</p></a>
                </li>
                <li><a href="#">
                        <h1>Heading 2</h1>
                        <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/>
                        <p>Select this option to lorum ipsum</p></a>
                </li>
                <li><a href="#">
                        <h1>Heading 3</h1>
                        <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/>
                        <p>Select this option to lorum ipsum</p></a>
                </li>
                <li><a href="#">
                        <h1>Heading 4</h1>                
                        <img src="http://www.f-secure.com/static/img/labs_global/Icons/98/forum_bubbles_icon.png" alt="cards"/>
                        <p>Select this option to lorum ipsum</p></a>

                </li>
            </ul>
        </article>


    </body>
</html>

截图： enter image description here

Answer 1

这是身体标签..在打开身体之前先闭上你的头......

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    </head>
    <body>
       [...]
    </body>
</html>

工作jsfiddle here。

最后一项丢失的底部边框

1 个答案: