Есть ли способ заставить два элемента оставаться рядом друг с другом в одной строке с JQuery Mobile?

Question

Я хочу, чтобы два элемента оставались в одном ряду.

Прямо сейчас у меня есть этот код:

<fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <input type="text" id="textinput"/>
   <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</fieldset>

Это работает.Метка, поле ввода и кнопка будут находиться в одной строке, если вы просматриваете их в полноэкранном режиме в браузере своего компьютера.Но если мы сделаем окно меньше, все три элемента будут показаны в одной строке каждый.Есть ли способ сделать так, чтобы метка отображалась в одной строке, а поле ввода + кнопка в строке ниже?

Answer 1

Вам необходимо переопределить улучшения jQM:

• http://jsfiddle.net/E4EVT/10/
• http://jsfiddle.net/E4EVT/36/ (с использованием макета сетки)
• http://jsfiddle.net/E4EVT/42/ (с использованием макета таблицы)

JS

$('#textinput2').css('width','60%').css('display','inline');

HTML

<div>
    <!-- use span instead of label -->
    <span>Text:</span>
    <input type="text" id="textinput2"/>
    <br />
    <input type="button" id="searchbutton2" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</div>

Я думаю, что вы, возможно, захотите взглянуть на макет сетки jQMпредложения

• http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html

Answer 2

Для Jquery Mobile 1.2.0

<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>

Answer 3

вам нужно добавить атрибут data-inline = "true" для элементов ввода.

Answer 4

CSS:

label {
   display: block;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    width: 212px; /* the width of twice your input (plus borders) */
}

И ваш HTML:

<fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <div class="wrap">
      <input type="text" id="textinput"/>
      <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
   </div>
</fieldset>

http://jsfiddle.net/ahallicks/BWsdk/

Редактировать:

Извините, неправильно прочитал ваш вопрос!Если вы хотите, чтобы все они начинались с одной строки, используйте следующий CSS:

label {
    float: left;
    margin-right: 12px;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    float: left;
    width: 212px; /* the width of twice your input (plus borders) */
}

http://jsfiddle.net/ahallicks/E4EVT/