Блог

На моей странице есть виджет с горизонтальным переключателем, который выглядит следующим образом:

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

Я хочу, чтобы он всегда охватывал ширину страницы, а не доходил до конца строки, если экран слишком широкий, или переливался на следующую строку, если она слишком узкая. Возможно ли это, и если да, то как это можно сделать?

Спасибо.

Рабочий пример: 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;    
}