jQuery Mobile的列表視圖縮略圖排列

使用

<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d"> 
<li><a href="image.php?imgid=2"> 
    <img src="../images/comma.png" class="ui-li-thumb" /> 
    <h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3> 
    <p class="ui-li-desc">by Scott Hill</p></a></li> 
</ul>

和獲取圖像，但列表視圖它不是在中心如何適應它的縮略圖區域

在這裏看到圖像

enter image description here

的幫助是非常讚賞

來源

2012-12-18 Rohan Patil

您是否嘗試在'img'元素中添加'vertical-align：middle'風格？ – Stanley

@StanleyW。是試過這個，但沒有變化出現 –

如果你有固定的每個列表視圖列表，那麼你可以給邊距爲img標籤和調整，使其移至中心

<style> 
.listex{ 
height:50px; 
} 
.ui-li-thumb{ 
    margin-top:10px; 
} 
</style> 
<ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d"> 
    <li class="listex"><a href="image.php?imgid=2"> 
     <img src="../images/comma.png" class="ui-li-thumb" /> 
     <h3 class="ui-li-heading">Colleeeeeeeeeeeeege</h3> 
     <p class="ui-li-desc">by Scott Hill</p></a> 
    </li> 
</ul>

的高度

您應該相應地設置高度和margin-top的值。

來源

2012-12-18 07:13:53

@Klra它的罰款，如果每個圖像具有相同的問題，但一些圖像高度適合行，然後進入這種情況下使用margin-top：10px; –

@RohanPatil ok。但是，所有的尺寸相同的圖像？ –

我有同樣的問題。我添加了下面的事件來設置需要的頂部填充。

$("img[class='ui-li-thumb']").load(function() { 
    $(this).css('padding-top',((80-this.height)/2)); 
});

來源

2013-01-13 23:19:44 user1112191

jQuery Mobile的列表視圖縮略圖排列

回答

相關問題