Question

是否有解决方案在新行上移动每个表单元素而不在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>
...

Answer 1

另一种方法就是这样

<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;
}

Answer 2

如果您希望元素的行为display:block;，为什么要使用inline？直接来自w3schools.com，＆＃34;阻止：将元素显示为块元素，如<p>＆＃34;。

我们都知道，当您使用<p>时，下一个元素会自动放在新行上。因此，如果您希望<label>和<input>元素并排，则必须使用display:inline或inline-block。

Answer 3

只做

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

多数民众赞成。享受

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

新行上的每个表单元素<label> + <input />，不带<div> </div> </label>

3 个答案: