在下拉列表前添加文本标签

时间:2012-03-18 21:30:57

标签: html css

我正在尝试在选择框前添加标签,我已将包含两个元素的div标签设置为“inline-block”。但是,跨度仍然位于选择框的顶部。

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

有什么想法吗?我在Chrome上...

5 个答案:

答案 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的宽度小于labelselect元素的合并宽度,否则http://jsfiddle.net/74bRX/