如何让标签留在 select 元素的顶部？

Question

有了这个html:

<h2>Where (Location / Station)</h2>
<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
  <option value="linecook">Line cook</option>
  <option value="barrista">Barrista</option>
  <option value="securityguard">Security Guard</option>
  <option value="fignipper">Nipper of Figs</option>
</select>

我的标签掉到 select 元素的底部：

我希望它位于顶部。我需要什么 html 或 CSS？

Answer 1

只需使用vertical-align:top:

label {
  vertical-align: top;
}

<label for="selwhere">Select the locations for the job type selected above</label>
<select name="selwhere" id="selwhere" multiple="multiple">
  <option value="linecook">Line cook</option>
  <option value="barrista">Barrista</option>
  <option value="securityguard">Security Guard</option>
  <option value="fignipper">Nipper of Figs</option>
</select>

如何让标签留在 select 元素的顶部？

How can I get the label to stay at the top of the select element?

html

css

label

html-select