Question

以下是我的代码段，我在iframe中显示ul-li元素中的YouTube视频列表。

<div data-role="content" id="contentVideosId" class="contentVideosClass">
            <!-- Below div required for tinyscrollbar to work -->
            <div class="video-wrapper">
                <ul data-role="listview"  id="video-list" data-theme="d">
                    <li style="display:inline"><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe>
                    <div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Add to my playlist</a>
                    <a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true">Add to Favourite</a></div>
                    </li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
                    <li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>

                </ul>
            </div><!-- /video=wrapper -->
        </div><!-- /content -->

如果你在上面的代码中看到第一个Li元素，我已经添加了两个按钮1. plus和star 我的要求是这2个按钮应与视频出现在同一行，但它出现在下一行，即视频下方。

我也尝试了以下CSS，但它对我不起作用。

ul li {
display: inline ;
padding: 0px 3px 0px 3px ;
}

注意：我会根据JSON数据添加视频和这2个按钮运行时。

Answer 1

就像我上面说的一些非常基本的CSS可以解决这个问题（jsfiddle）：

    ul li > * {
      display: inline-block;
      vertical-align: middle;
    }

Answer 2

尝试使用表格如下：

<li style="display:inline">
  <table>
    <tr>
      <td><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe></td>
      <td><div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Add to my playlist</a><a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true">Add to Favourite</a></div></td>
    </tr>
  </table>
</li>

Li元素在jQuery移动应用程序中处于同一行

2 个答案: