Question

目前我的移动应用程序看起来与下面链接上的类似：

使用以下代码：

<body>

<div data-role="page">

<div data-role="header">
    <h1 data-inline="true">Demo Page</h1>

      <a href="#" data-role="button" data-icon="mail" data-iconpos="notext">Mail</a>
      <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Settings</a>

  </div>

<div data-role="content" class="content">

    <p>Demo Page</p>



</div>



</div>

</body>

我想要做的是在标题栏的右侧有两个圆形按钮。我已经尝试将它们放在controlgroup div中，但由于某种原因，这会改变它们以便它们不再是圆形的 - 我得到方形按钮，中间有图标。更糟糕的是它们甚至没有正确对齐！你可以在这里看到我的意思：

http://jsfiddle.net/Gd8ZB/

和代码：

<body>

<div data-role="page">

<div data-role="header">
    <h1 data-inline="true">Demo Page</h1>
       <div data-role="controlgroup" class="ui-btn-right">
          <a href="#" data-role="button" data-icon="mail" data-iconpos="notext">Mail</a>
          <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Settings</a>
       </div>

  </div>

<div data-role="content" class="content">

    <p>Demo Page</p>



</div>



</div>

</body>

如何解决这个问题？任何帮助将不胜感激！

Answer 1

我按照以下方式完成了这项工作：

<div class="ui-btn-right">
    <a href="#" data-role="button" data-icon="mail" data-iconpos="notext">Mail</a>
    <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Settings</a>
</div>

Fiddle

Answer 2

http://jsfiddle.net/TM6Dt/1/

一种方法是更改第一个示例中第一个按钮的位置，然后使用以下css将其移动到右侧

 style="right: 40px; left: initial;"

在标题栏的右侧放置圆形图标按钮 - jquery mobile

2 个答案: