列表分隔符中的jQuery移动按钮对齐

Question

我正在开发一个jQuery移动应用程序，并想知道是否有人可以帮助列表分隔符中的按钮对齐。这是我创建的jsFiddle link，显示文本旁边的按钮。我想知道是否可以将按钮对齐。我尝试在按钮周围添加一个样式为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>

screenhsot：