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的列表视图缩略图排列

回答

相关问题