设置列表视图＆LT;立GT;高度jQuery Mobile的 [英] Setting Listview <li> Height in jQuery Mobile

问题描述

我试图调整＆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:

jQuery Mobile的默认CSS

谢谢！

我原意讨论列表视图专供的按钮。我是在我原来的解释过于宽泛，但基本上我试图调整不是所有的按钮，但只是＆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.

下面是一个演示： http://jsfiddle.net/gu7WE/

这篇关于设置列表视图＆LT;立GT;高度jQuery Mobile的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！