Question

我试图创建一个由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">&#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

您是否在jQM网站上看到了 TextInputs 示例？

这是 FIDDLE

  <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;
}

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

1 个答案: