jQuery Mobile中具有多个组的格式化工具栏

Question

我一直在玩jQuery mobile和PhoneGap，研究为平板电脑上的某些内容创建创建应用程序的可能性。

我希望能够创建一个格式工具栏，类似于在jQuery UI上显示的示例，但改用jQuery mobile。 不幸的是，当我尝试将多个控件组项放在一起时，它们最终都在页面上的一行上结束，而不是在同一行上彼此相邻：

<div data-role="footer" data-position="fixed">
  <div data-role="controlgroup" data-type="horizontal" >
    <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext">One</a>
    <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext">Two</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Three</a>
  </div>
  <div data-role="controlgroup" data-type="horizontal" >
    <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext">Four</a>
    <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext">Five</a>
    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Six</a>
  </div>
</div>

最终在页脚的两行中。 我尝试使用data-inline =“ true”，但它似乎不适用于div元素。 有任何想法吗？

Answer 1

如果添加display:inline-block; 只要有足够的屏幕空间，这两个控件组的样式就会显示在同一行上。

例子