如何在行中定位表单元素，同时让标签和元素彼此相邻

Question

我想创建CSS。

• 将标签宽度设置为 100px
• 将选择/输入元素放置在标签右侧
• 将 {标签、元素} 部分放置在行中

到目前为止，我的 CSS 失败了... 我不知道该怎么做。 简而言之，我想要这个：

Label:   [  ... ]
Label2:  [ ...  ]
Label3:  [...   ] 

如何？

span {
  width: 100px;
  display: block;
}

<div><label>
    <span>Label:</span>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</label>
  <label>
    <span>Label2:</span>
    <input name="motor" value="44" type="number">
</label></div>

Answer 1

使用您拥有的 HTML 结构，您可能希望将span设置为显示为inline-block，并将label设置为block以将其设置在新行上。

将span设置为inline-block允许它是内联的，但仍保持其框样式(例如宽度(。

span {
  width: 100px;
  display: inline-block;
}
label {display:block}

<div>
  <label>
    <span>Label:</span>
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
  </label>
  <label>
    <span>Label2:</span>
    <input name="motor" value="44" type="number">
  </label>
</div>

Answer 2

将每个label放在单独的div元素中，以解决您的问题。尝试给定的链接或以下代码

JSFiddle

网页代码-

<div>
    <label>
        <span>Label:</span>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </label>
</div>
<div>
    <label>
        <span>Label2:</span>
        <input name="motor" value="44" type="number">
    </label>
</div>

CSS代码-

span {
    width: 100px;
}