没有 <div> 的新行上的每个表单元素 <label>+<input>答案

【问题标题】：Each form element <label>+<input> on new line without <div>没有 <div> 的新行上的每个表单元素 <label>+<input>
【发布时间】：2014-01-16 21:27:08
【问题描述】：

是否有解决方案将每个表单元素移动到新行而不关闭 div 上的这些元素？

我的意思是：

<label for="one">One:</label>  <input type="text" id="one">
<label for="two">Two:</label>  <select id="two">
                                  <option value="a">a</option>
                                  <option value="b">b</option>
                               </select>
...

显示：

One:   [.......]
Two:   [a    \/]
and so on...

如果我穿上 CSS：

input, select, label {
   display:block;
}

那么标签与表单域不在同一行。

是唯一的解决方案：

<div><label for="one">One:</label>  <input type="text" id="one"></div>
...

【问题讨论】：

为什么不在表单元素后面加上<br>？
这不是使用 CSS 样式的“正确”方式
我认为使用 div 进行包装可以让您在设置表单样式时更加灵活，这是一种常见的做法。
所以你的意思是在没有额外标记的情况下开始一个新的行或块？
在不改变标记的情况下，您可以 (i) 向左浮动所有内容并清除左侧标签；或 (ii) 浮动并清除左侧标签并使控件显示块；或 (iii) 使用 label:before 注入一个换行符；或 (iv) 注入带有标签的块级框：之前；或 (v) 绝对定位一切。

标签： html css forms

【解决方案1】：

做事

<label for="one">One:</label>  <input type="text" id="one"> <br>

就是这样。享受

编辑：扩展哈代所说的，将它们包装在 div 或 span 中会给你更多稍后的灵活性，但如果你唯一关心的是把它全部放在一行中，就像我上面写的那样。

【讨论】：

【解决方案2】：

如果你想让你的元素表现inline，为什么要使用display:block;？直接取自 w3schools.com，“块：将元素显示为块元素，如 <p>”。

我们都知道，当您使用<p> 时，下一个元素会自动放置在新行上。所以如果你想让你的<label>和<input>元素并排，你必须使用display:inline或者inline-block。

【讨论】：

【解决方案3】：

另一种方法是这样的

<label><span>One:</span><input type="text" id="one"></label>

和css

label {
display:block;
position:relative;
padding-left:120px; /* adjust if necessary */
}
label > span {
position:absolute;
left:0;
}

【讨论】：

这padding-left:120px; 帮助了我！谢谢！