我正在尝试在选择框前添加标签,我已将包含两个元素的div标签设置为“inline-block”。但是,跨度仍然位于选择框的顶部。
<div class="unselected-field" style="display: inline-block;" id="selectCountry">
<span>test</span><select id="countrySelect" name="countrySelect"></select>
</div>
有什么想法吗?我在Chrome上...
答案 0 :(得分:8)
一个选项是disable
第一个选择的选项:
<select id="countrySelect" name="countrySelect">
<option disabled selected>Select Your Country:</option>
<option>USA</option>
<option>Germany</option>
<option>France</option>
</select>
答案 1 :(得分:6)
我通常在输入处包裹标签:
<div class="unselected-field" style="display: inline-block;" id="selectCountry">
<label>Test:<select id="countrySelect" name="countrySelect">
<option>Option 1</option>
</select>
</label>
</div>
答案 2 :(得分:3)
如果<select>
的宽度加上<span>
的宽度大于包含<div>
的宽度,<select>
将被迫低于{{1}而不是在它旁边。另外,<span>
的宽度依赖于它包含的文本,因此它可以有不同的宽度,除非你给它一个静态宽度。
答案 3 :(得分:0)
您是否可以在unselected-field
中发布代码,因为我可以在Chrome http://jsfiddle.net/tVT67/中正确显示该代码
事实上,我甚至可以移除inline-block
,但它仍然有用http://jsfiddle.net/H3GDN/
答案 4 :(得分:0)
对我来说工作正常http://jsfiddle.net/KG9hL/1/
除非包含div
的宽度小于label
和select
元素的合并宽度,否则http://jsfiddle.net/74bRX/