JQuery Mobile - 如何使分组按钮水平和垂直？

Question

在JQuery Mobile中，您可以通过以下方式轻松地对按钮进行分组：

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">1</a>
  <a href="#" class="ui-btn">2</a>
  <a href="#" class="ui-btn">3</a>
</div>

和垂直

<div data-role="controlgroup" data-type="vertical">
  <a href="#" class="ui-btn">1</a>
  <a href="#" class="ui-btn">2</a>
  <a href="#" class="ui-btn">3</a>
</div>

但是如何让它们水平和垂直组合？

谢谢！

Answer 1

使用jQuery Mobile GRID 。

    <div class="ui-grid-b" >
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
    </div>     

然后，如果你想摆脱按钮之间的空间，添加CSS以消除边距：

.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
    margin: 0 !important;
}

  

这是 DEMO