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

Question

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

有没有办法将文本和按钮保持在同一行，并且按钮向右对齐？任何帮助表示赞赏。

Answer 1

你可以通过使用 2 列布局网格来做到这一点，请参阅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>

截图：