Список просмотра Algin горизонтальный CSS для мобильных устройств

Question

У меня есть список данных, которые я связываю с помощью Knockoutjs, теперь для CSS-части, мне нужно выровнять ее по горизонтали. Я не очень хорош в CSS. У меня есть три изображения и имя пользователя, поэтому я хочу выровнять их по горизонтали для моего мобильного Приложение ниже мой код, пожалуйста, предложите мне.

<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;" />