Jquery div class 没有排队

Question

在“产品”选项卡下，我 select 第一个选项，但是当我尝试在垂直列中排列数据时（每列中有 9 个复选框）它生成 space 而不是对齐a 组和 b 组列。

我相信我使用的语法是 class="ui-grid-a or class="ui-grid-b。我在各种网站上看到了其他示例，但该代码似乎不适用于我的脚本。

如何让它们正确对齐？

谢谢。

<body>

<div data-role="page">
  <div data-role="header" data-theme="b" data-content-theme="b">
  <h1>FirePlace and BBQ Center</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="demoform.asp">
      <fieldset data-role="collapsibleset" data-theme="b" data-content-theme="b">

<div data-role="collapsible">
        <h3>Contact Information</h3>
<form name="htmlform" method="post" action="html_form_send.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

      </div>
      <div data-role="collapsible">
        <h3>Products</h3>
        <select id="model">
<option id="select" value="0">Please Select Fire Place</option>
<option id="DXV35_III" value="1">Mendota DXV 35 DeepTimber Fire III Direct Vent Gas Fireplace</option>
<option id="DXV45_III" value="2">Mendota DXV 45 DeepTimber Fire III Direct Vent Gas Fireplace</option>
<option id="DXV35" value="3">Mendota DXV 35 Time Fire Direct Vent Gas Fire Place</option>
    <option id="DXV42" value="4">Mendota DXV 42 Direct Vent Gas Fireplace</option>
</select>

        <div data-role="content"id="div1" style="display:none;" >

                <div data-role="fieldcontain">
                    <fieldset class="ui-grid-a">



                <label for="DXV35_1">Millennia Black</label>
          <input type="checkbox" name="modeltype" id="DXV35_1" value="DXV35_1">
          <label for="DXV35_2">Millennia Classic Brass</label>
          <input type="checkbox" name="modeltype" id="DXV35_2" value="DXV35_2">
          <label for="DXV35_3">Millennia Full Brass</label>
          <input type="checkbox" name="modeltype" id="DXV35_3" value="DXV35_3">
          <label for="DXV35_4">Wellington</label>
          <input type="checkbox" name="modeltype" id="DXV35_4" value="DXV35_4">
          <label for="DXV35_5">Andover Doors & Faceplate</label>
          <input type="checkbox" name="modeltype" id="DXV35_5" value="DXV35_5">
           <label for="DXV35_6">Prairie Doors & Faceplate</label>
          <input type="checkbox" name="modeltype" id="DXV35_6" value="DXV35_6">
           <label for="DXV35_7">Deerfield (outside fit only)</label>
          <input type="checkbox" name="modeltype" id="DXV35_7" value="DXV35_7">
           <label for="DXV35_8">Victoria Black</label>
          <input type="checkbox" name="modeltype" id="DXV35_8" value="DXV35_8">
           <label for="DXV35_9">Victoria Gold</label>
          <input type="checkbox" name="modeltype" id="DXV35_9" value="DXV35_9">
           <label for="DXV35_10">Tuscany Black</label>
           </div>
            <div class="ui-block-b">
          <input type="checkbox" name="modeltype" id="DXV35_10" value="DXV35_10">
           <label for="DXV35_11">Tuscany Gold</label>
          <input type="checkbox" name="modeltype" id="DXV35_11" value="DXV35_11">
            <label for="DXV35_12">Bentley Black Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_12" value="DXV35_12">
           <label for="DXV35_13">Bentley Vintage Iron Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_13" value="DXV35_13">
          <label for="DXV35_14">Bentley Gold Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_14" value="DXV35_14">
          <label for="DXV35_15">Bentley Antique Copper Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_15" value="DXV35_15">
          <label for="DXV35_16">Bentley Gun Metal Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_16" value="DXV35_16">
          <label for="DXV35_17">Bentley Swedish Nickel Arch Screen Doors</label>
          <input type="checkbox" name="modeltype" id="DXV35_17" value="DXV35_17">
          <label for="DXV35_18">Andover/Prairie Doors & Faceplate Overlay (See Pricing Sheet)</label>
          <input type="checkbox" name="modeltype" id="DXV35_18" value="DXV35_18">
          </div>
          </div>



<div data-role="controlgroup" id="div3" style="display:none;">
                <label for="DXV35_1test">Millennia Black test</label>
          <input type="checkbox" name="modeltype" id="DXV35_1test" value="DXV35_1test">
          <label for="DXV35_2test">Millennia Classic Brass test</label>
          <input type="checkbox" name="modeltype" id="DXV35_2test" value="DXV35_2test">
          <label for="DXV35_3test">Millennia Full Brass test</label>
          <input type="checkbox" name="modeltype" id="DXV35_3test" value="DXV35_3test">
        </div>  
<div id="div2" style="display:none;">am div3</div>

      </div>
      <div data-role="collapsible">
        <h3>Installation</h3>
        <p>I'm the expanded content.</p>

      </div>
      <div data-role="collapsible">
        <h3>Other Tab to Be Determined</h3>
        <p>Test data</p>
      </div>
    </div>
  </div>    
      </fieldset>
    </form>
  </div>
</div>

这是一个linkhttp://jsfiddle.net/w22L5nyo/

Answer 1

将 float:left 添加到 css 以获得 ui-field-contain class 并删除上边距

              <div data-role="fieldcontain" style="float:left; margin:0px">

http://jsfiddle.net/w22L5nyo/2/

Answer 2

我可能不完全理解你的问题，但你为什么不直接删除 div 和 class .ui-block-b 分隔两个部分的容器并将它们全部放在同一个容器，如下所示：

   ...
   <input type="checkbox" name="modeltype" id="DXV35_9" value="DXV35_9">
   <label for="DXV35_10">Tuscany Black</label>
</div> //<-----------------------------------------------------------remove
<div class="ui-block-b"> //<-----------------------------------------remove
   <input type="checkbox" name="modeltype" id="DXV35_10" value="DXV35_10">
   <label for="DXV35_11">Tuscany Gold</label>
   <input type="checkbox" name="modeltype" id="DXV35_11" value="DXV35_11">
   <label for="DXV35_12">Bentley Black Arch Screen Doors</label>
   ...

FIDDLE

Answer 3

如果您真的打算使用 jQM 网格将 2 个列表并排放置，那么您只需省略以下行：<div class="ui-block-a">

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
       //your radios for col 1
    </div>
    <div class="ui-block-b">
        //your radios for col 2
    </div>
</fieldset>

Updated FIDDLE

此外，您有很多额外的、不必要的 DOM 元素和一些缺少的结束标记...

Jquery div class 没有排队

Jquery div class not lining up

html

javascript

jquery

alignment

jquery-mobile