当前位置: 动力学知识库 > 问答 > 编程问答 >

android - control in same or next row style

问题描述:

I want a label and a control to behave as follows:

  • if the the width of the screen in less than X the label and the control should be in different rows and the control should expand to take the full width.
  • if the width is higher (or equal) than X, the label and the control should be in the same row and the control should be aligned right. Also, the text and the control should be vertically aligned center:

I have this code (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;

}

Here, the control and label are in different or same row as expected.

My problems are:

  • When the control is in a different row, it doesn't expand to full width.
  • Control and label are not "vertically aligned center" when on the same row

Could anyone help?

网友答案:

use media query like this:

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

jsFiddle

more info

update:

for vertically align you need to set all rows in a same height then set line height to your labels as the height:

CSS

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

jsFiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: