如何将表单输入和标签保持在一起？

Question

假设我有一个带有表单的网页:

<form>
  <label for="FirstName">First:</label>
  <input name="FirstName" type="text">
  <label for="MiddleName">Middle:</label>
  <input name="MiddleName" type="text">
  <label for="LastName">Last:</label>
  <input name="LastName" type="text">
</form>

如果我将浏览器窗口调整得足够小,我会在标有"Middle:"和"MiddleName"输入的标签之间换行.最好在标签和不相关的输入字段之间放置一个中断,例如在"FirstName"输入和"MiddleName"的标签之间断开,和/或在输入"MiddleName"和"LastName"的标签之间断开.显然我可以添加<br/>标签,但是有一种很好的方法可以将相关项目保持在一起,并且当浏览器窗口足够宽时仍然只使用1行吗？

我意识到这是一个人为的例子,但这是我在几个更复杂的现实世界形式中遇到麻烦的模式.

Answer 1

把inputs 放在s里面label,你甚至不需要for属性.然后设置标签样式white-space: nowrap以防止自动换行.

label { white-space: nowrap; }

<form>
<label>First: <input name="FirstName" type="text"></label>
<label>Middle: <input name="MiddleName" type="text"></label>
<label>Last: <input name="LastName" type="text"></label>
</form>