将标签的位置指定为 html 中下拉菜单的上方答案

【问题标题】：specify label's position to be above of the dropdown menu in html将标签的位置指定为 html 中下拉菜单的上方
【发布时间】：2020-11-20 14:59:08
【问题描述】：

如何指定标签的位置在下拉菜单上方？

例如

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit" value="Submit">
</form>

<label for="cars">Choose a car:</label> 中是否有任何样式参数可以将其置于菜单上方？

谢谢！

【问题讨论】：

它应该已经在输入上方，我认为您可能需要更详细地解释您的意思或提供一个不起作用的功能示例。
@DBS。谢谢你的帮助。它在左边，而不是上面。见jsfiddle.net/aerijman/t10powLm

标签： html dropdown

【解决方案1】：

因为label 是一个内联元素，所以除非将其显示选项更改为block 或inline-block，否则无法为其指定大小

 <label for="cars" style="display:block;">Choose a car:</label>

MSDN解释。

【讨论】：

【解决方案2】：

到目前为止，它是这样工作的：

样式应该包括display: inline-block和width: 10em;，label tag应该在select tag之后关闭。

<form action="/action_page.php">
  <label for="cars" style="display: inline-block; width: 10em;">Choose a car:
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select></label>
  <input type="submit" value="Submit">
</form>

见here

我仍在寻找更全面的解释来学习！

【讨论】：