Jquerymobileスタイリングを維持しながらリスト項目の複数のコントロール

Question

スタイリングを維持しながらjquerymobileリスト項目に複数のコントロールを配置したいと考えています。

すなわち

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

私はAと同じライン上に2つのimgのリンクが続く矢印で正しくスタイルリスト項目をレンダリングしたいと思います。

どうすればいいですか？ （もし可能であれば、jsfiddleスニペットは素晴らしいでしょう）

私の質問を読む時間をとってくれてありがとうございます。

編集： 既存のコントロールスタイルを台無しにすることなく、2つのイメージリンクを行内に配置する必要があります。このsnippet

UPDATEを参照してください ：いくつかのソリューションは、Chromeブラウザやエミュレータ上で動作 ながら、私は、少なくともAndroidとiPhoneプラットフォーム上で所望の出力をレンダリングするソリューションを持っていると思います。

Answer 1

グリッド内のアイコンを左に移動し、カスタムスタイルを下に示すように移動してこの問題を解決しました。

アプリのスクリーンショットを参照してください。 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> 

Answer 2

すなわち

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

編集、<p>タグ内のリスト項目の<a>コンテンツを囲みます。

をあなたはコメントで説明した所望の効果を得るために再アレンジ<li>少しすることができ、分割ボタンとui-li-aside（docsを参照）を使用して：

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