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>

我想要一个呈现正确样式的列表项，带有箭头，后跟同一行上的两个img链接。

我该怎么做？（如果可能的话，jsfiddle片段会很棒）

提前感谢您花时间阅读我的问题。

修改：我需要在行内放置两个图像链接，而不会弄乱现有的控件样式。见snippet

更新：虽然某些解决方案适用于Chrome浏览器和模拟器，但我希望有一个解决方案能够至少在Android和iPhone平台上呈现所需的输出。

Answer 1

将您的列表项<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>（参见docs）重新排列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>

Answer 2

我通过将图标移动到网格内部的左侧以及一些自定义样式来解决此问题，如下所示。

在我的应用页面中查看应用截图。 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>

Jquerymobile在列表项中控制多个控件，同时保持样式

2 个答案: