Mobile position of images in listview using jQuery
If I add <li class="ui-li-has-thumb">
and then add an image it places it on the left side of the li
.
I have two more images. How do I place them on the right side of the li
? Ideally they would be side-by-side and not one top of the other.
<ul data-role="listview">
<% @pending_friends.each do |f| %>
<li class="ui-li-has-thumb">
<开发者_运维技巧;img class="ui-li-thumb" src="..." />
<%= f.name %>
<img class="accept" src="...." />
<img class="decline" src="...." />
<% end %>
</ul>
EDIT
I know there's split button, but is there way to assign my last 2 images to the right? Need 2 buttons, not 1
-------------------------------------------
| ------ ---------------------- ------- |
| | ui- || || what ||
| | li- || Main Content || is ||
| |thumb || || class ||
| | || || name ||
| ------ ---------------------- ------- |
-------------------------------------------
Well this is what I came up with, Live Link
- http://jsfiddle.net/phillpafford/BthnC/6/
A nested navbar in the listview
<div data-role="page">
<ul data-role="listview" data-theme="a">
<li>
<div data-role="navbar">
<ul>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/18-envelope.png" />
</li>
<li>
Title
</li>
<li> </li>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/88-beermug.png" />
</li>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/21-skull.png" />
</li>
</ul>
</div>
</li>
<li>
<div data-role="navbar">
<ul>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/18-envelope.png" />
</li>
<li>
Title
</li>
<li> </li>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/88-beermug.png" />
</li>
<li>
<img src="http://jquerymobile.com/demos/1.0b1/docs/toolbars/glyphish-icons/21-skull.png" />
</li>
</ul>
</div>
</li>
</ul>
</div>
精彩评论