リストビューalgin横型CSS for mobile

Question

私はKnockoutjsを使ってバインドしているデータのリストを持っています。今はCSSの部分があります。水平に整列させる必要があります.CSSにはあまりよくありません.3つのイメージとユーザー名があります。私は私のコードは親切に私を示唆している私のモバイルアプリケーションのために水平に整列したい。

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