Make a horizontal radio button widget have fixed width - html

Question

I have a horizontal radio button widget in my page that looks like this:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="tool-selector" id="tool-selector-1" value="1" type="radio" checked>
<label for="tool-selector-1">1</label>
<input name="tool-selector" id="tool-selector-2" value="2" type="radio">
<label for="tool-selector-2">2</label>
<input name="tool-selector" id="tool-selector-3" value="3" type="radio">
<label for="tool-selector-3">3</label>
<input name="tool-selector" id="tool-selector-4" value="4" type="radio">
<label for="tool-selector-4">4</label>
<input name="tool-selector" id="tool-selector-5" value="5" type="radio">
<label for="tool-selector-5">5</label>
<input name="tool-selector" id="tool-selector-6" value="6" type="radio">
<label for="tool-selector-6">6</label>
<input name="tool-selector" id="tool-selector-7" value="7" type="radio">
<label for="tool-selector-7">7</label>
</fieldset>
</form>
I want it to always span the page width instead of not reaching to the end of the line if the screen is too wide or overflowing to the next line if it is too narrow. Is this possible, and if so, how can it be done?
Thanks.

Answer 1

Working example: http://jsfiddle.net/Gajotres/4KahY/
HTML:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input name="tool-selector" id="tool-selector-1" value="1" type="radio" checked>
<label for="tool-selector-1">1</label>
<input name="tool-selector" id="tool-selector-2" value="2" type="radio">
<label for="tool-selector-2">2</label>
<input name="tool-selector" id="tool-selector-3" value="3" type="radio">
<label for="tool-selector-3">3</label>
<input name="tool-selector" id="tool-selector-4" value="4" type="radio">
<label for="tool-selector-4">4</label>
<input name="tool-selector" id="tool-selector-5" value="5" type="radio">
<label for="tool-selector-5">5</label>
<input name="tool-selector" id="tool-selector-6" value="6" type="radio">
<label for="tool-selector-6">6</label>
<input name="tool-selector" id="tool-selector-7" value="7" type="radio">
<label for="tool-selector-7">7</label>
</fieldset>
</form>
JavaScript:
.ui-controlgroup-controls {
width: 100% !important;
}
// This number shoud reflect 100 divided with number of controlgroup radio elements
.ui-controlgroup-controls .ui-radio {
width: 14.25% !important;
}
.ui-controlgroup-controls .ui-radio label {
text-align: center !important;
}