jquery - 在移动设备上在同一行标注和输入

Question

我试图在宽度足够大时在同一行中获取标签和输入字段，而在宽度太小时在不同的行中获取标签和输入字段。

这确实有效，请参阅 this jsFiddle .

HTML代码:

<div style="border-bottom-width:0;" data-role="fieldcontain">
    <label for="ti_gebdat">Geburtsdatum</label>
    <input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d">
</div>
<div style="border-bottom-width:0;" data-role="fieldcontain">   
    <label for="oeffDienst">Öffentlicher Dienst</label>
    <select name ="oeffDienst" id="oeffDienst" data-role="slider">
        <option value="0">Nein</option>
        <option value="1">Ja</option>
    </select>
</div>

但是，正如您在 jsFiddle 中看到的那样，控件过早地跳转到下一行。我怎样才能让它保持在同一行上，直到控件真正重叠？

我正在使用 jQuery-Mobile 并在 android 上进行测试，其中控件始终位于不同的行上。

Answer 1

这是使用不使用媒体查询的不同解决方案更新的 fiddle : http://jsfiddle.net/ezanker/qCmxZ/3/

在这个解决方案中，我没有使用 jQM 提供的“fieldcontain” Angular 色，而是将标签和控件放在单独的 div 中，设置为内联显示而不是 block 显示。然后在每一行之间清除 float 。

    <div class="dispInlineLabel" >
        <label for="ti_gebdat">Geburtsdatum</label>
    </div>
    <div class="dispInline">
        <input name="ti_gebdat" id="ti_gebdat" style="text-align: right" type="date"  data-theme="d" />
    </div>
    <!-- Clear floats for each new line -->
    <div class="clearFloats"></div>

    <div class="dispInlineLabel" >  
        <label for="oeffDienst">Öffentlicher Dienst</label>
    </div>
    <div class="dispInline">
        <select name ="oeffDienst" id="oeffDienst" data-role="slider">
            <option value="0">Nein</option>
            <option value="1">Ja</option>
        </select>
    </div>

在 CSS 中，设置最小宽度，以便所有标签和控件的大小都合适，然后当您调整页面大小时，只有当页面不再足够宽以显示组合的最小宽度时，控件才会换行。这是 CSS:

.dispInline, .dispInlineLabel{
    display: inline-block;
    border-bottom-width:0;
}
.dispInlineLabel{
    min-width: 150px;
}
.dispInline{
    min-width: 200px;
}
.clearFloats{
    clear:both;
}

当控件重叠时，您必须以某种方式“告诉”系统，我正在使用 min-width css 做到这一点。