css – 在jQuery Mobile中设置Listview>高度

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

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

jQuery Mobile Default 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.

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效