Question

I am working on a jQuery Mobile Project. I need to create 3 Horizontal radio button that stretched to full width. I`ve worked on the normal grid, but I was unable to stretch the width. So now working with 960 grid. It increases the space between the button instead of stretching the button to full width. Please help me with it.

    <div data-role="content"  >
    <p align="center" class="msg"> Apply leave </p>

    <fieldset class="container_12">
     <fieldset data-role="controlgroup" data-type="horizontal"  class="row_b"> 


<div class="grid_2"> <input type="radio" name="q2" id="q2_0" value="0" checked="checked" data-mini="true" /></div>
            <label for="q2_0">C Leave</label>
        <div class="grid_2">   <input type="radio" name="q2" id="q2_1" value="1" data-mini="true" /></div>
            <label for="q2_1">s Leave</label>
           <div class="grid_2"> <input type="radio" name="q2" id="q2_2" value="2" data-mini="true" /></div>
            <label for="q2_2">P Leave</label>


    </fieldset> </fieldset> 
    </div>

Answer 1

Use this code:

.ui-controlgroup-controls
{
    width:100% !important;
}
.ui-radio {
    width:33% !important;
}

Working example: http://jsfiddle.net/yUZy8/