Мобильная позиция изображений в списке с помощью jQuery

Question

Если я добавлю <li class="ui-li-has-thumb">, а затем добавлю изображение, оно помещается в левую часть li.

У меня есть еще два изображения. Как мне разместить их на правой стороне li? В идеале они должны быть рядом, а не друг над другом.

<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

Я знаю, что есть кнопка разделения, но есть ли способ назначить мои последние 2 изображения справа? Нужно 2 кнопки, а не 1

 -------------------------------------------
|  ------  ----------------------  -------  |
| | ui-  ||                      ||  what  ||
| | li-  ||    Main Content      ||   is   ||
| |thumb ||                      || class  ||
| |      ||                      ||  name  ||
|  ------  ----------------------  -------  |
 -------------------------------------------

Answer 1

Ну, это то, что я придумал, Live Link

• http://jsfiddle.net/phillpafford/BthnC/6/

Вложенная навигационная панель в списке

<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>&nbsp;</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>&nbsp;</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>