Блог

Я пытаюсь создать горизонтальную группу управления, состоящую из 2 полей параметров и одного поля ввода текста. Однако документация на веб-сайте JQM не охватывает это, и я не могу найти способ правильно выровнять поля. В настоящее время он делает это:

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

  <div class="ui-grid-c">
  <div class='ui-block-a' >
    <div class='ui-body ui-body-a gridContent' style="border:none;">
      <div class="ui-field-contain ">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <select name="sortBy" id="sortBy"  data-mini="true" >
            <option id="all" name="all" value="all">Show All</option>
            <option id="size" name="size" value="size">Physical Size</option>
            <option id="sizecode" name="sizecode" value="sizecode">Sizecode</option>
          </select>
          <select name="how" id="how"  data-mini="true" >
            <option id="lessThan" name="lessThan" value="lessThan">amp;#60;amp;#61;</option>
            <option id="equal" name="equal" value="equal">amp;#61;</option>
            <option id="greaterThan" name="greaterThan" value="greaterThan">amp;#62;amp;#61;</option>
          </select>
          <input type="text" name="searchBox" id="searchBox" placeholder="Search" value="" data-mini="true">
        </fieldset>
      </div>
    </div>
  </div>
  <div class='ui-block-b'>
    <div class='ui-body ui-body-a  gridContent' style='border:none;'>
      <input type="text" name="searchBox" id="searchBox" placeholder="Search" value="" data-mini="true">
    </div>
  </div>
  <div class='ui-block-c'>
    <div class='ui-body ui-body-a' style='border:0px;'>
      <input type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">
    </div>
  </div>
  <div class='ui-block-d'>
    <div class='ui-body ui-body-a' style='border:0px;'>
      <input type="text" name="textinput-5" id="textinput-5" placeholder="Text input" value="" data-mini="true">
    </div>
  </div>
</div>
<!-- close grid -->
 

Спасибо

Вы видели пример TextInputs на сайте jQM?

Вот СКРИПКА

   <div class="ui-field-contain ">
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
      <select name="sortBy" id="sortBy"  >
        <option id="all" name="all" value="all">Show All</option>
        <option id="size" name="size" value="size">Physical Size</option>
        <option id="sizecode" name="sizecode" value="sizecode">Sizecode</option>
      </select>
      <select name="how" id="how"   >
        <option id="lessThan" name="lessThan" value="lessThan">amp;#60;amp;#61;</option>
        <option id="equal" name="equal" value="equal">amp;#61;</option>
        <option id="greaterThan" name="greaterThan" value="greaterThan">amp;#62;amp;#61;</option>
      </select>
      <input type="text" name="searchBox" id="searchBox" placeholder="Search" value=""  data-wrapper-class="controlgroup-textinput ui-btn" >
    </fieldset>


.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}