列表視圖li elemnt高度小於它的縮略圖高度在jQuery手機1.4.0

Question

我有我的jQuery手機1.4.0應用程序中的以下列表視圖，每個列表元素具有不同數量的數據顯示在行中，問題是如果有一個li元素包含少量數據並且其高度小於縮略圖高度，則縮略圖高度的其餘部分將不可見，如下圖所示：

我已將listview li元素的高度大於使用此代碼的縮略圖高度：#EmpList li {max-height：120px！important; }但它沒有爲我工作李高度沒有改變！我怎樣才能讓李的高度大於它的縮略圖高度？

請幫我...

<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; 
} 

Answer 1

首先，你需要最小高度，而不是最大高度使用。 其次你需要的裏內將其應用到第一錨標記，而不是李：

#EmpList li a:first-child{ 
    min-height:100px !important; 
} 

DEMO