使用jQuery在listview中移动图像位置

如果我添加

然后添加一个图像，它会将其放置在

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>

---

这就是我想到的，现场链接

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>&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>

标题













标题

你可以试试CSS浮动，对吗？浮动：右侧仅将您带到内部容器的右侧。正在尝试查找右外容器的类名。是否有足够的宽度容纳它们？我试过了，它们并排出现：但是你看到了第一个img是如何一直走到左边的，而其他图像是在中间的吗。试图找到将其置于右侧的类名。我更新了问题的更多细节

<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>