设置Listview <li> jQuery Mobile中的高度

Question

我正在尝试<li>在我的jQuery移动网站(listview)中调整s,并且似乎无法在CSS中找到合适的类来执行此操作.我基本上调整了一些元素(页眉和页脚等)的大小.我有五个<li>垂直堆叠的按钮,按钮和页脚下方有一个间隙.

我只想将每个<li>高度设置为20%(这样就可以了,因为它有五个并且它们嵌套在一个正文内容div中.有没有人知道控制它的jQuery Mobile CSS中的类？我可以似乎在搜索中找到了这个信息.这里是CSS的链接供参考:

jQuery Mobile默认CSS

谢谢!

UPDATE

我本来打算专门为按钮讨论'listview'.我在原来的解释中过于宽泛,但基本上我试图调整不是所有按钮而只调整<li>s.

Answer 1

如果您签出类,您可以自己决定如何选择LI元素,我会使用.ui-li该类,如果您想确保只获得一个listview元素,那么您可以指定更详细的选择器:

#my-listview-id > .ui-li {
    height : 20%;
}

以下是listviewjQuery Mobile文档的一些示例输出:

            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
                <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-f ui-corner-top ui-btn-up-undefined">Overview</li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/intro.html" class="ui-link-inherit">Intro to jQuery Mobile</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/getting-started.html" class="ui-link-inherit">Quick start guide</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>  
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/features.html" class="ui-link-inherit">Features</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/accessibility.html" class="ui-link-inherit">Accessibility</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
                <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text"><a href="docs/about/platforms.html" class="ui-link-inherit">Supported platforms</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>
            </ul>

UPDATE

这里有一些比我之前发布的更多,这里有一些测试/工作代码:

#my-page {
    height   : 100%;
    margin     : 0;
    padding    : 0;
}
#my-page .ui-content, #my-listview {
    min-height : 100%;
    height     : 100%;
    margin     : 0;
    padding    : 0;
}
#my-listview .ui-li {
    height : 20%;
}

#my-page我的data-role="page"元素的id 在哪里,是元素#my-listview的id data-role="listview".

这是一个演示:http://jsfiddle.net/gu7WE/