列表視圖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;" />