jquery移动水平控件组，混合，包括文本框

Question

我试图创建一个水平控制组，由两个选项框和一个文本输入字段组成。但是，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">&#60;&#61;</option>
            <option id="equal" name="equal" value="equal">&#61;</option>
            <option id="greaterThan" name="greaterThan" value="greaterThan">&#62;&#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 -->

谢谢

Answer 1

您在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">&#60;&#61;</option>
        <option id="equal" name="equal" value="equal">&#61;</option>
        <option id="greaterThan" name="greaterThan" value="greaterThan">&#62;&#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;
}