Muflix Muflix - 2 months ago 5
CSS Question

Positioning of Label at the top, next to the multiselect

I would like to know, how to place a label next to the multiselect or textarea at the top ? For example I have this code

<div class="form-group">
<label class="control-label" for="SelectId">label</label>
<select name="SelectId" id="SelectId" style="min-width: 604px;" size="5" multiple="multiple">
<option value="0">No Selection</option>
...
</select>
</div>


which looks like at the picture
enter image description here

Only solution I found is with relative positioning, which works but broke when browser window is resized.

<div class="form-group">
<label class="control-label" for="SelectId">label</label>
<select name="SelectId" id="SelectId" style="position: relative; top: -75px;" size="5" multiple="multiple">
<option value="0">No Selection</option>
...
</select>
</div>


Any idea ?

Answer

With vertical-align you are able to position inline elements based on the other inline elements in the same line.

.control-label { 
    vertical-align: top; 
}

label and select are both display: inline by defaut.

Comments