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

Question

我有使用 Knockoutjs 绑定的数据列表，现在是 CSS 部分，我需要对齐它 horizontal.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

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

向所有人提供 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;" />