CSS 在 jQuery Mobile 中设置 Listview <li> 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8838212/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting Listview <li> Height in jQuery Mobile
提问by MillerMedia
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.
我正在尝试<li>在我的 jQuery 移动站点 (listview) 中调整s 的大小，但似乎无法在 CSS 中找到合适的类来执行此操作。我基本上调整了一些元素的大小（页眉和页脚等）。我有五个<li>垂直堆叠的按钮，按钮和页脚下方有一个间隙。
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:
我只想将每个<li>的高度设置为 20%（这可以解决问题，因为有五个并且它们嵌套在正文内容 div 中。有人知道 jQuery Mobile CSS 中控制这个的类吗？我可以似乎在搜索中找不到此信息。这是 CSS 的链接以供参考：
Thanks!
谢谢！
UPDATE
更新
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>s。
回答by Jasper
If you check-out the classes you can make your own decision about how to select the LIelements, I would use the .ui-liclass and if you want to make sure to only get one listviewelement then you can specify a more detailed selector:
如果您查看类，您可以自己决定如何选择LI元素，我将使用.ui-li该类，如果您想确保只获取一个listview元素，则可以指定一个更详细的选择器：
#my-listview-id > .ui-li {
height : 20%;
}
Here is some sample listviewoutput from the jQuery Mobile docs:
以下是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
更新
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%;
}
Where #my-pageis the id of my data-role="page"element and #my-listviewis the id of the data-role="listview"element.
#my-page我的data-role="page"元素的id在哪里，是元素#my-listview的id data-role="listview"。
Here is a demo: http://jsfiddle.net/gu7WE/
这是一个演示：http: //jsfiddle.net/gu7WE/
回答by user700284
.ui-btnis the class you have to use.But this same class is used not just by "buttons" alone .Other jQuery Mobile components like listviewalso make use of it.So if you set the height of .ui-btnyou will mess up those components too.So it is better to define a separate class,only for those five buttons and then set the heightto 20%to that class.
.ui-btn是你必须使用的类。但是这个类不仅仅被“按钮”单独使用。其他 jQuery Mobile 组件listview也使用它。所以如果你设置高度，.ui-btn你也会弄乱这些组件。所以它最好定义一个单独的类，仅针对这五个按钮，然后将heightto设置为20%该类。
回答by Hexodus
Why so complicated? This would do the trick too IMHO.
为什么这么复杂？恕我直言，这也能奏效。
#my-listview-id {
height:100%;
}
#my-listview-id li {
height: 20%;
}
回答by Megarushing
It is simple as that:
很简单：
.ui-li>.ui-btn-inner {
padding-top: 10px
padding-bottom: 10px
}
