I have list of data which i am binding using Knockoutjs,Now comes for CSS part, i need to align it horizontal.I am not much good in CSS.I have three images and username so i want to align it in Horizontal for my Mobile app below is my code kindly suggest me.
<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>
Remove all the float from your img containers and the parent div containers.
Provide display: inline-block to all and then vertical-align: middle.
So your img elements should look something like:
<img class="profileimage" data-bind="attr: { src: UserImage }" style = "width:60px; height:60px; display: inline-block; vertical-align: middle;" />