1

次の 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>

スクリーンショット: ここに画像の説明を入力

4

1 に答える 1

0

ボディタグです.ボディを開く前に頭を閉じてください.

<!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 を使用します。

于 2012-09-02T10:59:08.447 に答える