css - 列表分隔符中的 jQuery Mobile 按钮对齐

Question

我正在开发一个 jQuery 移动应用程序，想知道是否有人可以帮助解决列表分隔符中的按钮对齐问题。这是一个link到我创建的 jsFiddle，显示文本旁边的按钮。我想知道是否可以将按钮右对齐。我试过在按钮周围添加一个样式为 style="text-align: right;" 的 div，但这会将按钮向下推，如 this ，我不想要。

有没有办法让文本和按钮保持在同一行，并且按钮右对齐？感谢您的帮助。

Answer 1

您可以使用 2 列 layout grid 来做到这一点, 请参阅 jsfiddle

代码:

<div data-role="page" id="p1">
    <div  data-role="header"><h1>Header Page 1</h1></div>

    <div  data-role="content">
         <ul data-role="listview" data-inset="true" data-divider-theme="a">
           <li data-role="list-divider">
             <div class="ui-bar ui-grid-a">
               <div class="ui-block-a" style="margin-top:10px;">List Header</div>
               <div class="ui-block-b" style="text-align:right;"><a href="#" data-role="button" data-mini="true" data-icon="plus" data-inline="true" data-theme="a">Add</a></div>
             </div>
           </li>
           <li>List item 1</li>
      </ul>
    </div>

    <div  data-role="footer"><h4>Footer</h4></div>
</div>

屏幕截图: