Полноразмерные горизонтальные кнопки с помощью jquery mobile?

Question

В Jquery mobile я могу сгруппировать горизонтальные кнопки, но они не занимают 100% ширины.

Я попытался добавить класс, который устанавливает width:100%, но это не сработало.

Как я могу это сделать?

Спасибо!

Обновление + Возможное исправление: Кажется, что это не сработало, потому что я явно использовал width="50%" в обеих кнопках. Я сделал 45% и подгонка. Возможно, какие-то поля у кнопок?

Исходный код с примененным исправлением: http://pastebin.com/ZXDNfAU1

Answer 1

<div class="ui-grid-a">
    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
</div>

Выше будет делать это, если он не находится в нижнем колонтитуле или элементе заголовка. Здесь есть две сетки столбцов: http://view.jquerymobile.com/master/demos/grids-buttons/

Я не знаю, как это сделать в нижнем колонтитуле

Answer 2

<div class="ui-grid-solo">
    <div class="ui-block-a">
         <input type="submit" name="Action" value="Register" data-theme="b"/>
    </div>
</div

Это работает

Answer 3

<div data-role="controlgroup" data-type="horizontal">
  <a href="index.html" data-role="button">Yes</a>
  <a href="index.html" data-role="button">No</a>
</div>

Я получил код выше из документации: http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/buttons/buttons-grouped.html

Я попробовал это сам, и он отлично работает.Вы получаете 2 кнопки рядом, которые расширяются, чтобы заполнить 100% экрана.

Answer 4

Если вы хотите горизонтальную кнопку 2, вы можете использовать

<div style="float:left; " >  
<div style="float:right;" >

Answer 5

Осмотрите его с помощью firebug, чтобы увидеть, что заставляет их плохо отображаться.

И добавьте data-type="horizontal" в div контрольной группы в ваших источниках.