在“产品”选项卡下,我选择了第一个选项,但是当我尝试在垂直列中排列数据时(每列中有9个复选框),它会生成一个空格,而不是对齐组a和组b列。
我相信语法是class =“ui-grid -a或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>
答案 0 :(得分:0)
为ui-field-contains类添加float:left到css并删除上边距
<div data-role="fieldcontain" style="float:left; margin:0px">
答案 1 :(得分:0)
如果您真的打算使用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>
更新了 FIDDLE
此外,你有很多额外的,不必要的DOM元素和一些缺少结束标记......
答案 2 :(得分:-1)
我可能不完全理解你的问题,但是为什么你不要删除分隔两个部分的类.ui-block-b
的div容器,并将它们全部放在同一个容器中:
...
<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>
...