thinkanotherone thinkanotherone - 6 days ago 5
CSS Question

Adding a text label in front of dropdown list

I am trying to add a label in front of a select box, I have set the div tag that contains both element to be "inline-block". But, the span is still on top of the select box.

<div class="unselected-field" style="display: inline-block;" id="selectCountry">
<span>test</span><select id="countrySelect" name="countrySelect"></select>
</div>


Any ideas ? I am on Chrome...

Answer

if the <select>'s width plus the <span>'s width is greater than the containing <div>, the <select> will be forced to go below the <span> instead of being beside it. also, <select>'s width relies on the text that it contains, so it can have a varying width unless you give it a static width.

Comments