Li elements to be on the same line in jQuery mobile application

Question

Following is my code snippet where I am showing list of YouTube videos in ul-li element inside the iframe.

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

If you see in the above code for first Li element I have added two buttons 1. plus and star My requirement is that this 2 buttons should appear on the same line as the video but it is appearing on the next line i.e. below the video.

I have also tried the following CSS but it did not work for me.

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

Note: I would be adding videos and this 2 button runtime based on JSON data.

Answer 1

Like I said above some very basic CSS can solve this (jsfiddle):

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

Answer 2

Try using table as follows:

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