如何在Jquery Mobile 1.4中调整列表项的大小

Question

我试图减少Jquery Mobile中列表项的大小没有成功，我已经尝试了很多我在SO上找到的代码。下面是我上次尝试的代码;

#class_list {
    height:100%;
}
#class_list li {
    height: 20%;
}

列表项是动态生成的。

Answer 1

有很多方法可以为列表项设置自定义高度，但我认为百分比不会起作用。您可以使用jquery获取屏幕大小并将其除以项目数，然后以像素为单位动态更新css。

演示修改JQM给定的静​​态列表项的CSS名称

http://jsfiddle.net/b53bg0j5/

CSS

.ui-listview>.ui-li-static {
height: 60px;
}

=============================================== ==

演示拥有（！important）列表项的类，以通过JQM的原始规则启用它。

http://jsfiddle.net/52aey3o6/

CSS

.b {
height: 25px !important;
}

=============================================== ===

li元素的直接css规则

li {
height: 66px;
}

=============================================== ===

自定义列表，为（ul）元素添加一个类

<ul data-role="listview" class="FF">

.FF>li {
height: 46px;
}