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

Question

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

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

该列表项是动态生成的。

Answer 1

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

演示静态列表项

http://jsfiddle.net/b53bg0j5/

CSS

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

修改JQM的给定CSS名============== ===================================

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

http://jsfiddle.net/52aey3o6/

CSS

.b { 
height: 25px !important; 
} 

=============================== ===================锂元素

直接CSS规则

li { 
height: 66px; 
} 

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

自定义添加一个类的（UL）元素

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

.FF>li { 
height: 46px; 
}