问题描述
我试图调整＆LT;李＆GT; 在我的jQuery Mobile的网站（列表视图），似乎无法找到CSS合适的班级做它。我已经基本上调整一些元素（页眉和页脚等）。我有五个＆LT;立GT; 按钮垂直堆叠且有下面的按钮和页脚
I'm trying to resize the <li>s in my jQuery mobile site (listview) and can't seem to find the right class in CSS to do it. I've basically resized some of the elements (the header and footer, etc.). I have five <li> buttons stacked vertically and there is a gap below the buttons and the footer.
我只是想设置每个＆LT;李＆GT; 的高度，以20％（即会做的伎俩，因为有五他们，他们嵌套在一个。正文内容DIV有谁知道在jQuery Mobile的CSS控制此我似乎无法找到一个搜索此信息类下面是CSS的一个链接，以供参考：
I just want to set each <li>'s height to 20% (that would do the trick since there is five of them and they are nested in a body content div. Does anyone know the class in the jQuery Mobile CSS that controls this? I can't seem to find this info in a search. Here's a link to the CSS for reference:
谢谢！
我原意讨论列表视图专供的按钮。我是在我原来的解释过于宽泛，但基本上我试图调整不是所有的按钮，但只是＆LT;李方式＆gt; 取值
I was originally meaning to discuss 'listview' exclusively for the buttons. I was too broad in my original explanation but basically I'm trying to resize not all buttons but just the <li>s.
推荐答案
如果您退房的类，你可以就如何选择 LI 元素你自己的决定，我会使用的.ui丽类，如果你想确保只有一次列表视图元素，则你可以指定一个更详细的选择：
If you check-out the classes you can make your own decision about how to select the LI elements, I would use the .ui-li class and if you want to make sure to only get one listview element then you can specify a more detailed selector:
#my-listview-id > .ui-li {
height : 20%;
}
下面是一些示例列表视图从jQuery Mobile的文档输出：
Here is some sample listview output from the jQuery Mobile docs:
<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>
更新
有更给这一点比我早previously发布，这里是一些测试/工作code：
There was a little more to this than I had previously posted, here is some tested/working code:
#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%;
}
其中，＃我页是我的数据角色=页面元素和<$的ID C $ C>＃我-的ListView 是ID的数据角色=列表视图元素。
Where #my-page is the id of my data-role="page" element and #my-listview is the id of the data-role="listview" element.
下面是一个演示：
这篇关于设置列表视图＆LT;立GT;高度jQuery Mobile的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！