在jquery mobile中設置多個組的工具欄

Question

我一直在玩jQuery mobile和PhoneGap，研究在平板電腦上創建一些內容創建應用的可能性。

我希望能夠創建一個格式工具欄，類似於jQuery UI上顯示的示例，但使用jQuery移動。不幸的是，當我嘗試將多個controlgroup物品放在一起，它們每個最終在頁面上自己的線，而不是彼此相鄰的在同一行：

<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;樣式添加到兩個控制組，它們將出現在同一行上，只要有足夠的屏幕空間。

examle