0

我一直在使用 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 元素。有任何想法吗？

4

1 回答 1

1

如果将display:inline-block;样式添加到两个控件组，只要有足够的屏幕空间，它们就会出现在同一行。

例子

于 2013-08-30T21:36:05.657 回答