我在jQuery mobile 1.4.0应用程序中有以下列表视图,每个列表元素都有不同数量的数据显示在行中,问题是如果有一个li元素包含很少的数据且其高度小于缩略图高度,缩略图高度的剩余部分将不可见,如下图所示,
我使用以下代码使listview li元素的高度大于其缩略图高度:#EmpList li {max-height:120px!important;但它对我没有用,李高度没有改变!如何使li高度大于其缩略图高度?
请帮帮我......
<div data-role="page">
<div data-role="header">
<h1> page1</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="EmpList" data-inset="true" data-filter="true" data- filter-placeholder="Search" data-split-icon="delete" style="margin-top: 40px;" >
<li><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > Emp1</font><BR>
<font class="line2" >Id:123</font><BR>
<font class="line3" >Dep:Marketing</font><BR>
<font class="line4" >Sal:2000$</font><BR>
<font class="line5" >Spec:Social Marketing</font>
</a><a href="#" id="split-icon1" class="delete">Delete</a>
</li>
<li class="RTLList" ><a href="#">
<img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" />
<font class="line1" > EmP2</font><BR><BR>
<font class="line2" >Id:123</font><BR>
<font class="line3" >Spec:Trainee</font><BR>
</a><a href="#" id="split-icon2" class="delete">Delete</a>
</li>
</ul>
</div>
CSS
#EmpList li{
max-height:120px !important;
}
.ui-listview>.ui-li-has-thumb>.ui-btn {
margin-left: 2.5em;
padding-left: 1em;
padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>.ui-btn>img:first-child{
position: absolute;
top: 10px ;
right:8px;
left: auto;border: solid green;
max-width:100px !important;
max-height:100px !important;
}
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
border-top-left-radius: 0;
border-top-right-radius: 5px;
}
.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
border-bottom-left-radius: 0;
border-bottom-right-radius: 5px;
}
.ui-listview>li.ui-li-has-alt>.ui-btn{
margin-right: 0;
}
.ui-listview>li.ui-first-child>a.ui-btn+a.ui-btn{
border-top-left-radius: 5px;
border-top-right-radius: 0px;
}
.ui-listview>li.ui-first-child>a.ui-btn:first-child{
border-top-left-radius: 0px;
border-top-right-radius: 5px;
}
.ui-listview>li.ui-last-child>a.ui-btn+a.ui-btn{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 0px;
}
.ui-listview>li.ui-last-child>a.ui-btn:first-child{
border-bottom-left-radius: 0px;
border-bottom-right-radius: 5px;
}
.ui-listview-inset>li.ui-li-has-alt>.ui-btn+.ui-btn{
border-right: 0;
}
.ui-listview-inset>li>a.ui-btn:first-child{
border-left: 0;
}
.delete {
left: 0 !important;
}
答案 0 :(得分:2)
首先,您需要使用min-height而不是max-height。 其次,您需要将它应用于li中的第一个锚标记,而不是li:
#EmpList li a:first-child{
min-height:100px !important;
}
<强> DEMO 强>