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

正如人类所提到的，媒体查询对元素顺序的变化做出了响应。在你的jQuery mobile CSS 450px中，元素将不再并排排列的魔术宽度。

您可以使用自定义规则覆盖样式表，因此无论屏幕大小如何，都会应用宽度超过450px的样式。你可以通过简单地覆盖有问题的选择器（http://jsfiddle.net/qCmxZ/1/）来实现这一点：

@media all {        
    .ui-field-contain input.ui-input-text,
    .ui-field-contain textarea.ui-input-text,
    .ui-field-contain .ui-input-search {
        width: 78%;
        display: inline-block;
    }

    .ui-field-contain label.ui-slider,
    .ui-field-contain label.ui-input-text {
        vertical-align: top;
        display: inline-block;
        width: 20%;
        margin: 0 2% 0 0;
    }
}

然而 - 除非一致地完成 - 这不是一个明智的想法，因为你改变了jQuery mobile的输入字段对小显示尺寸的反应的核心。

最好考虑阅读响应式网页设计。

Answer 2

以下是使用不使用媒体查询的其他解决方案更新的小提琴： http://jsfiddle.net/ezanker/qCmxZ/3/

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

    <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做这个。

Answer 3

我遇到了同样的问题。受到mritz_p的回答的启发，我设法解决了这个＆＃34;问题＆＃34;通过在页面中添加自定义的css文件。从jqm css文件复制css代码，稍微调整一下min-width标签宽度和.ui-controlgroup-controls。

供参考，这里是css代码：

@media (min-width: 28em) {
    .ui-field-contain,
    .ui-mobile fieldset.ui-field-contain {
        padding: 0;
        margin: 1em 0;
        border-bottom-width: 0;
    }
    .ui-field-contain:before,
    .ui-field-contain:after {
        content: "";
        display: table;
    }
    .ui-field-contain:after {
        clear: both;
    }
    .ui-field-contain > label,
    .ui-field-contain .ui-controlgroup-label,
    .ui-field-contain > .ui-rangeslider > label {
        float: left;
        width: 20%;
        margin: .5em 2% 0 0;
    }
    .ui-popup .ui-field-contain > label,
    .ui-popup .ui-field-contain .ui-controlgroup-label,
    .ui-popup .ui-field-contain > .ui-rangeslider > label {
        float: none;
        width: auto;
        margin: 0 0 .4em;
    }
    .ui-field-contain > label ~ [class*="ui-"],
    .ui-field-contain .ui-controlgroup-controls {
        float: left;
        width: 78%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /* ui-hide-label deprecated in 1.4. TODO: Remove in 1.5 */
    .ui-hide-label > label ~ [class*="ui-"],
    .ui-hide-label .ui-controlgroup-controls,
    .ui-popup .ui-field-contain > label ~ [class*="ui-"],
    .ui-popup .ui-field-contain .ui-controlgroup-controls {
        float: none;
        width: 100%;
    }
    .ui-field-contain > label ~ .ui-btn-inline {
        width: auto;
        margin-right: .625em;
    }
    .ui-field-contain > label ~ .ui-btn-inline.ui-btn-icon-notext {
        width: 1.75em;
    }
}

移动设备上的标签和输入

3 个答案: