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

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>会被迫位于 的下方<span>而不是位于其旁边。另外，<select>的宽度取决于它包含的文本，因此它可以具有变化的宽度，除非您为其指定静态宽度。