我正在尝试在我的jQuery移动网站(listview)中调整< li> s,并且似乎无法在CSS中找到合适的类来执行此操作.我基本上调整了一些元素(页眉和页脚等)的大小.我有五个< li>垂直堆叠的按钮,按钮和页脚下方有一个间隙.
我只是想将每个< li>的高度设置为20%(这样就可以了,因为它们有五个并且它们嵌套在一个正文内容div中.有没有人知道jQuery Mobile CSS中控制的类这个?我似乎无法在搜索中找到这个信息.这是一个CSS的链接供参考:
谢谢!
UPDATE
我本来打算专门为按钮讨论’listview’.我的原始解释过于宽泛,但基本上我试图调整所有按钮的大小,而只是调整< li> s.
解决方法
如果您签出类,您可以自己决定如何选择LI元素,我会使用.ui-li类,如果您想确保只获取一个listview元素,那么您可以指定更详细的选择:
#my-listview-id > .ui-li { height : 20%; }
以下是jQuery Mobile文档的一些示例listview输出:
<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是data-role =“listview”元素的id.