ListView在jQuery Mobile的网格系统中无法正确显示

时间:2013-05-28 18:59:58

标签: jquery css jquery-mobile jquery-mobile-listview jquery-mobile-grid

我正在尝试将ListView放在网格系统中,但它没有正确显示。它是平板电脑的应用程序,所以不要理会这个庞大的文本。

jsfiddle:http://jsfiddle.net/ZX4YC/

<div data-role="page" data-theme="b">

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

    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a" style="font-size:70pt">
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        A:
                    </div>
                    <div class="ui-block-b" id="oeeTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        B:
                    </div>
                    <div class="ui-block-b" id="aTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        C:
                    </div>
                    <div class="ui-block-b" id="pTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        D:
                    </div>
                    <div class="ui-block-b" id="qTextField">
                        0
                    </div>
                </div>
            </div>
            <div class="ui-block-b">

                <ul data-role="listview">
                  <li><a href="acura.html">Acura</a></li>
                  <li><a href="audi.html">Audi</a></li>
                  <li><a href="bmw.html">BMW</a></li>
                </ul>

            </div>
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

工作示例:http://jsfiddle.net/Gajotres/L4WnM/

CSS:

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

.ui-listview {
    margin: 0 !important;
}

只有 .ui-listview 类非常重要, .ui-content 只能删除内容填充。