2011-11-28 2 views
1

Im, использующий jQuery Mobile, и у меня есть горизонтальный набор тумблеров.Невозможно Горизонтально Центр Горизонтальные переключающие наборы

Я хотел бы сосредоточить его на странице, или Я бы хотел растянуть его так, чтобы он занимал 100% ширины. Либо было бы хорошо, что я делаю. Я пробовал много разных подходов, но пока никто не работал. Использование JQuery Мобильные V1.0

<fieldset data-role="controlgroup" data-type="horizontal"> 
     <input type="checkbox" name="monday" id="monday" class="custom"/> 
     <label for="monday">Monday</label> 
     <input type="checkbox" name="tuesday" id="tuesday" class="custom" /> 
     <label for="tuesday">Tuesday</label> 
     <input type="checkbox" name="wednesday" id="wednesday" class="custom" /> 
     <label for="wednesday">Wednesday</label> 
     <input type="checkbox" name="thursday" id="thursday" class="custom" /> 
     <label for="thursday">Thursday</label> 
     <input type="checkbox" name="friday" id="friday" class="custom" /> 
     <label for="friday">Friday</label> 
     <input type="checkbox" name="saturday" id="saturday" class="custom" /> 
     <label for="saturday">Saturday</label> 
     <input type="checkbox" name="sunday" id="sunday" class="custom" /> 
     <label for="sunday">Sunday</label> 
    </fieldset> 

ответ

1

Я просто была такая же проблема, и я решил ее, добавив, поставив fieldset в div, который имеет text-align: center, а затем устанавливающего display из fieldset в inline.

E.g.

HTML

<div class="custom"> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
     <input type="checkbox" name="monday" id="monday" /> 
     <label for="monday">Monday</label> 
     ... 
    </fieldset> 
</div> 

CSS

.custom { 
    text-align: center; 
} 
.custom fieldset { 
    display: inline; 
} 

Установка display из fieldset в inline может иметь некоторые другие эффекты, например, я заметил, что поля/обивка немного изменилась, но кроме этого он делал то, что хотел.

Смежные вопросы