控制相同或下一行的样式

Question

我希望标签和控件的行为如下：

• 如果屏幕宽度小于X标签和控件应该在不同的行中，控件应该展开以占据整个宽度。
• 如果宽度高于（或等于）X，则标签和控件应位于同一行，控件应对齐。此外，文本和控件应垂直对齐中心：

我有这段代码（test the jsFiddle）：

HTML：

<div class="container">
    <div class="dispInlineLabel" >
        <label for="rb_geschlecht-2a">Geschlecht</label>
    </div>
    <div class="dispInline">
        <fieldset  data-role="controlgroup" data-type="horizontal">                     
            <input type="radio" name="rb_geschlecht" id="rb_geschlecht-2a" value="0">
            <label for="rb_geschlecht-2a">weiblich</label>
            <input type="radio" name="rb_geschlecht" id="rb_geschlecht-2b" value="1">
            <label for="rb_geschlecht-2b">männlich</label>
        </fieldset>
    </div>
    <div class="clearFloats"></div>

    <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>
    <div class="clearFloats"></div>                                     
</div>  

CSS：

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

此处，控件和标签与预期的行不同或相同。 我的问题是：

• 当控件位于不同的行时，它不会扩展为全宽。
• 当在同一行时，控制和标签不是“垂直对齐的中心”

有人可以帮忙吗？

Answer 1

使用像这样的媒体查询：

@media all and (max-width: 500px){
  .dispInline{
      width:100%;
    }
}

jsFiddle

more info

更新

对于垂直对齐，您需要将所有行设置为相同的高度，然后将行高设置为标签作为高度：

<强> CSS

.dispInlineLabel{
    min-width: 120px;
    height:55px;
}
.dispInlineLabel label{
    line-height:55px;
}
.dispInline{
    float:right;
    height:55px;
}

jsFiddle