jquery - JQuery Mobile+Phone Gap: リスト ビュー (テーブル ビュー) のフォーマットに関する問題

Question

次のコードleft side list view in split viewを使用して実装しましたjQuery mobile phonegap

        <div data-role="page"  id="main" data-hash="false">

            <div data-role="header">
                <h1>Main</h1>
            </div><!-- /header -->

            <div data-role="content" data-theme="c">    




                <ul data-role="listview" data-theme="c" data-header-theme="a">





                    <li>first Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>Second Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li> 
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  <!---------- Section Header -------->
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>


                    <li>3rd Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="c">One item</li>  <!----------- Section Header -------->
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li> 
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>
                        </ul>
                    </li>
                    <li>4th Row contains 8 list items
                        <ul>
                            <li data-role="list-divider" data-header-theme="a">One item</li>  
                            <li><a href="#siteInfo" data-panel="main">One item</a></li>
                            <li><a href="#siteContacts" data-panel="main">One itemts</a></li>
                            <li><a href="#siteProviders" data-panel="main">One item</a></li>

                            <li data-role="list-divider" data-divider-theme="c">One item</li>  
                            <li><a href="#equipment" data-panel="main">One item</a></li>
                            <li><a href="#scroll" data-panel="main">One itemrts</a></li>
                            <li><a href="#context" data-panel="main">One iteme</a></li>
                            <li><a href="#context" data-panel="main">Data commissioned</a></li>                     
                        </ul>
                    </li>

xcodeでjQueryを実行すると正常に動作しますが、テーブルビューは以下に示されていますが、通常のリストビューではありません

以下のlist items are in a separate box but not as a listように

normal listしかし、私は以下の2つの画像に示すように望んでいます