width 100% buttons inside div

Question

I'm making a Phonegap app, for that i am using html, css and jquery mobile css framework. I'm trying to make a menu with 3 buttons that glued to each other and centered. I want them to occupy the entire parent div width. I tried to set some properties but it doesn't work..

Here is the code :

<div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
    <div class="ui-controlgroup-controls ">
        <a href="#" class="ui-btn ui-btn-transparent ui-first-child">1</a>
        <a href="#" class="ui-btn ui-btn-transparent">2</a>
        <a href="#" class="ui-btn ui-btn-transparent ui-last-child">3</a>
    </div>
</div>

I tried to set a width 100% at parent's div and width:auto to .ui-controlgroup-controls but it doesn't fit all width.

Actual css :

.ui-controlgroup {
width: 100% !important;
}
.ui-controlgroup, fieldset.ui-controlgroup {
padding: 0;
margin: .5em 0;

And

.ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block;
vertical-align: middle;
}
.ui-controlgroup-controls {
width: inherit !important;
}

I want to set this width in % to be responsive on small smartphones.

Thanks!

Answer 1

Check out Jquery mobile grid system. since you are using already jQuery mobile, this will make a nice centered 3 buttons. to the ui-controlgroup-controls go to full width use this css rule.

.ui-controlgroup-controls {
    display: inline !important;
    /* or you can choose to */
    /* display: block !important; */
    /* there are other options for display that work, not inline-block */
}

The markup will look like this. Notice the ui-grid-b and the ui-block-a, ui-bloc-b and ui-block-c.

 <div data-role="controlgroup" data-type="horizontal" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all">
    <div class="ui-controlgroup-controls ui-grid-b">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-btn-transparent ui-first-child">1</a>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-btn-transparent">2</a>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-btn-transparent ui-last-child">3</a>
      </div>
    </div>

Finally a plunker.

Edit if you only whant this to apply to the controlgroup-horizontal.

.ui-controlgroup-horizontal .ui-controlgroup-controls{
  display: inline !important;
}

or else you can write your own rule and apply it to the markup class