列表视图algin horizo​​ntal mobile for mobile

Question

我有使用Knockoutjs绑定的数据列表，现在是CSS部分，我需要将它对齐horizo​​ntal.I没有太多好的CSS.I有三个图像和用户名我想在我的移动应用程序下面水平对齐它是我的代码善意建议我。

<ul style="list-style: none;" data-role="listview" id="hierarchical-listview" data-bind="foreach:UserProfile"> 
<li style="background-color:#FFF"> 
<div style="width:100%;"> 
<div style="width:50%"> 
<div style="padding-left:20px;padding-top:10px"> 
<span data-bind="text:UserId" style="display:none;"></span> 
<span data-bind="text:Username"></span> 
<img class="profileimage" data-bind="attr: { src: UserImage }" style="width:60px;height:60px;float:left!important;" /> 
<img data-bind="attr: { src: UserProfileImage }" style="width:30px;height:30px;float:left!important;" /> 
</div> 
</div> 
<div style="width:50%;float:left;margin: 0px -20px;"> 
<img data-bind="attr: { src: UserPostedImage }" style="width:30px;height:30px;float:left!important;" /> 
<input type="checkbox" class="listcheckbox km-widget km-icon km-check" data-bind="checked:UserSelected" /> 
</div> 
</div> 
</div> 
</li> 
</ul> 

Answer 1

删除所有float从img容器和父div容器。

向全部提供display: inline-block然后vertical-align: middle。

所以你img元素应该是这个样子：

<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />