我正在尝试使用jQuery mobile创建一个表单,我正在尝试将两个字段并排放置,因此他们可以在一行中选择日期和时间。到目前为止,我没有看到任何人实现这一点,而不将整个表格分成两列。此外,jQuery mobile在小屏幕上的字段集之间放置了一个很好的<hr>
,但是在
<div class="ui-field-contain">
<fieldset class="ui-grid-a">
<div data-role="fieldcontain" class="ui-block-a">
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</div>
<div data-role="fieldcontain" class="ui-block-b">
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</div>
</fieldset>
</div>
这就是我到目前为止 - 我有很多额外的部分/类可能会复制相同的东西 - 那些可能会相互干扰吗?此外,我正在使用JQuery Mobile 1.3,因为我的应用程序的其余部分正在构建,因为我听说如果我导入v1.4会有一些重大更改。
编辑:我找出了丢失的<hr>
,这是因为封闭的div需要data-role =“fieldcontain”。希望<fieldset>
vs role=fieldcontain
vs .ui-field-contain
vs <controlgroup>
答案 0 :(得分:1)
您需要向“data-role:fieldcontain”元素添加float属性,并清除:none。这是一个快速而肮脏的例子。我建议为两者之间的任何常见类使用额外的CSS类:
https://jsfiddle.net/2xuqbL5e/
<div class="ui-field-contain">
<fieldset class="ui-grid-a">
<div data-role="fieldcontain" class="ui-block-a"><!-- Add float:left and clear:none -->
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</div>
<div data-role="fieldcontain" class="ui-block-b"><!-- Add float:right and clear:none -->
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</div>
</fieldset>
编辑:抱歉,我的小提琴搞砸了。现在应该修好。
答案 1 :(得分:0)
将网格设置为外部容器,然后不要混合网格单元格和字段包含:
<fieldset class="ui-grid-a sideByside">
<div class="ui-block-a">
<fieldset data-role="fieldcontain">
<label for="date">Start date:</label>
<input type="date" name="date" id="date" value="">
</fieldset>
</div>
<div class="ui-block-b">
<fieldset data-role="fieldcontain">
<label for="time">Start time:</label>
<input type="time" name="time" id="time" value="">
</fieldset>
</div>
</fieldset>
您可以添加一些CSS来获取单元格间距:
.sideByside .ui-block-a {
padding-right: 6px;
}
.sideByside .ui-block-b {
padding-left: 6px;
}
更新了 FIDDLE