JQuery Mobile - how make grouped button both horizontally and vertically?

问题

In JQuery Mobile you can easily group buttons horizontally by:

<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>

and vertically by

<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>

but how can I make them group both horizontally and vertically?

Thank you!

回答1:

Use a 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>     

Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:

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

Here is a DEMO

来源：https://stackoverflow.com/questions/25688406/jquery-mobile-how-make-grouped-button-both-horizontally-and-vertically