Выравнивание элементов по горизонтали, jQuery mobile

Question

У меня нет опыта работы на мобильных jQuery мобильных или связанных мобильных интерфейсах пользовательского интерфейса, мне сложно выравнивать элементы по горизонтали.

Я хочу горизонтально выровнять текстовое поле и выбрать тег. так что они появляются в строке.

Я попытался тип данных = "горизонтальный" и данных рядный = "истинный". но они не работают.

Вот код, я использую,

<div data-role="controlgroup" data-type="horizontal"> 
     <label for="cs" class="fieldLabel">option 1: </label> 
     <select name="cs[param_string_1]" id="cs[param_string_1]" data-inline="true"> 
      <option>options</option> 
     </select> 
     <input type="text" data-inline="true" style="width:100px" id="cs[param_num_1]" name="cs[param_num_1]" /> 
</div> 

Комментарии/Предложения?

Answer 1

Ответ Тома был полезен. но эта работа работает точно в соответствии с потребностью

Я использовал следующее, чтобы получить требуемый результат.

<div data-role="controlgroup" data-type="horizontal"> 
     <table> 
     <tr> 
      <td width="30%"> 
      <select name="cs_abc" class="fieldLabel" style="width: 100%" data-inline="true" id="cs[abc]"> 
       <option>...</option>   
      </select> 
      </td> 
      <td width="70%"> 
       <input type="text" id="cs_xyz" style="width:160px" data-theme="d" name="cs[xyz]" /> 
      </td> 
      </tr> 
     </table> 
    </div>   

Можно использовать макет сетки для этого (см here)

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

Some good fiddles были полезны.

Answer 2

Посмотрите на Text inputs & Textareas.

Он не поддерживает data-inline самостоятельно, но вы можете использовать вместо data-role=fieldcontain:

<div data-role="fieldcontain"> 
    <label for="name">Text Input:</label> 
    <input type="text" name="name" id="name" value="" /> 
</div> 

Насколько я вижу, что вы не можете поместить несколько входов рядом друг с другом, используя только JQuery Moblie .. .

Answer 3

<div href="#" data-role="button" style="margin:30px;">Adjust</div> 

, если вы хотите, чтобы манипулировать правой и левой корректировки использовать style="margin-left=30px;margin-right=30px;"

Answer 4

... Я все еще учусь Рамочную JQuery MOBILE себя, так что я знаю, это боль, когда вы просто нужно что-то сделать, но вы действительно должны попытаться использовать то, что уже построено в рамках, особенно если вы собираетесь создавать мобильные приложения. Сделайте себе одолжение и найдите время, необходимое для его изучения.

Также еще один наконечник; вам нужно избегать использования значений px для элементов прорисовки, поскольку они обычно недостаточно хорошо масштабируются на мобильных устройствах, значения em лучше всего подходят для использования в кросс-платформе.

Я успешно использовал что-то похожее на следующий код для ввода текста «inline» и выбора полей с помощью jqm. если вы хотите, чтобы стили отличались друг от друга, вы можете добавить букву шаблона темы после отдельного элемента ui-block, чтобы он выглядел как ui-block-b или ui-block-c и т. д. Это все описано здесь: http://demos.jquerymobile.com/1.0rc1/docs/content/content-grids.html

<div class="ui-grid-a"> 
    <div class="ui-block"> 
     <label for="cs[ps_1]" class="fieldLabel ui-hidden-accessible">option 1: </label> 
     <select name="cs[ps_1]" id="cs[ps_1]" data-mini="true"> 
     <option>options</option> 
     </select> 
    </div> 
    <div class="ui-block"> 
     <input type="text" style="width:10em;" id="cs[pn_1]" name="cs[pn_1]" /> 
    </div> 
    </div><!-- /grid-a -->