Question

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

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

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

Answer 1

一个选项是disable第一个选择的选项：

<select id="countrySelect" name="countrySelect">
  <option  disabled selected>Select Your Country:</option>
  <option>USA</option>
  <option>Germany</option>
  <option>France</option>
</select>

Answer 2

我通常在输入处包裹标签：

<div class="unselected-field" style="display: inline-block;" id="selectCountry">
    <label>Test:<select id="countrySelect" name="countrySelect">
        <option>Option 1</option>
        </select>
    </label>
</div>

Answer 3

如果<select>的宽度加上<span>的宽度大于包含<div>的宽度，<select>将被迫低于{{1}而不是在它旁边。另外，<span>的宽度依赖于它包含的文本，因此它可以有不同的宽度，除非你给它一个静态宽度。

Answer 4

您是否可以在unselected-field中发布代码，因为我可以在Chrome http://jsfiddle.net/tVT67/中正确显示该代码

事实上，我甚至可以移除inline-block，但它仍然有用http://jsfiddle.net/H3GDN/

Answer 5

对我来说工作正常http://jsfiddle.net/KG9hL/1/

除非包含div的宽度小于label和select元素的合并宽度，否则http://jsfiddle.net/74bRX/

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

5 个答案: