Question

I would like to place multiple controls in a jquerymobile list item while maintaining styling.

i.e

<li>
  <a href="itemDetails.html">Item 1</a>
  <a href="mailto:?"><img src="img/mail.png" /></a>
  <a href="sms:?"><img src="img/sms.png" /></a>
</li>

I would like to a render properly styled list item with an arrow followed by two img links on the same line.

How can I do this? (if possible a jsfiddle snippet would be great)

Thanks in advance for taking the time to read my question.

EDIT:
I need to put two image links inside the row without messing up existing control styles.
See this snippet

UPDATE:
While some solutions work on a chrome browser and an emulator, I would like to have a solution that will render the desired output at least on Android and iPhone platforms.

Answer 1

I resolved this issue by moving the icons to the left inside a grid and some custom styling as shown below.

See app screenshots in my app’s page. Baby Birdie app in Google Play

<a href="<%= this.model.url%>"  style="padding-top: 0px;">
  <div class="ui-grid-a">
    <div class="ui-block-a" style="width: 13%;padding-left: 5px;padding-top:10px">
      <div data-role="controlgroup" data-type="horizontal">
        <a data-role="button" href="<%= this.model.mailTo %>"><img src="img/mail.png" /></a>
        <a data-role="button" href="<%= this.model.sms %>"><img src="img/sms.png"  /></a>
      </div>
    </div>
    <div class="ui-block-b" style="width:85%">
      <a href="<%= this.model.url%>" class="ui-link-inherit"><%= unescape(this.model.tagName)  %></a>
    </div>
  </div><!-- /grid-a -->    

  <span class="ui-li-count"><%= this.model.tagCount  %></span>
</a>