Несколько элементов управления Jquerymobile в элементе списка при сохранении стиля

Question

Я хотел бы поместить несколько элементов управления в элемент списка jquerymobile, сохраняя при этом стилизацию.

* 1003 т.е. *

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

Я хотел бы отобразить правильно оформленный элемент списка со стрелкой, за которой следуют две ссылки img в одной строке.

Как я могу это сделать? (если возможно, будет полезен фрагмент jsfiddle)

Заранее спасибо, что нашли время прочитать мой вопрос.

EDIT: Мне нужно поместить две ссылки на изображения внутри строки, не путая существующие стили управления. Посмотреть этот фрагмент

UPDATE: Хотя некоторые решения работают на браузере Chrome и эмуляторе, я хотел бы иметь решение, которое будет отображать желаемый результат по крайней мере на платформах Android и iPhone.

Answer 1

Я решил эту проблему, переместив значки влево внутри сетки и применив некоторые пользовательские стили, как показано ниже.

См. Скриншоты приложения на странице моего приложения. Приложение Baby Birdie в 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>

Answer 2

Заключите содержимое <a> элемента списка в тег <p>, т.е.

<li>
  <a href="#where-ever-ever-the-list-item-links-to">
      <p>
          Item 1
          <a href="mailto:?"><img src="img/mail.png" /></a>
          <a href="sms:?"><img src="img/sms.png" /></a>
      </p> 
  </a>
</li>

Редактировать

Вы можете немного переставить <li>, чтобы получить желаемый эффект, описанный в комментариях, используя кнопки разделения и ui-li-aside (см. документы ):

    <li>
       <a href="list-item-link">
               <h3>Item 2</h3>               
           <p class="ui-li-aside" style="margin: 20px 45px 0 0;">
                   <a href="mailto:?" class="myimage"><img src="img/mail.png" /></a>
                    <a href="sms:?"><img src="img/sms.png" /></a>
           </p>
        </a>
        <a href="list-item-arrow-link"></a>            
    </li>