Html 每个表单元素 <label>+<input> 在没有 <div> 的新行上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20832004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Each form element <label>+<input> on new line without <div>
提问by Perocat
Is there a solution to move each form element on a new line without closing these elements on divs?
是否有解决方案可以将每个表单元素移动到新行而不关闭 div 上的这些元素？
I mean:
我的意思是：
<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>
...
To display:
显示：
One: [.......]
Two: [a \/]
and so on...
If I put on CSS:
如果我穿上 CSS：
input, select, label {
display:block;
}
then labels are not on the same line as the form fields.
然后标签与表单字段不在同一行。
Is the only solution:
是唯一的解决办法：
<div><label for="one">One:</label> <input type="text" id="one"></div>
...
回答by Michael
Another way to do it is like this
另一种方法是这样的
<label><span>One:</span><input type="text" id="one"></label>
and the css
和 CSS
label {
display:block;
position:relative;
padding-left:120px; /* adjust if necessary */
}
label > span {
position:absolute;
left:0;
}
回答by Josan Iracheta
Why would you use display:block;if you want your elements to behave inline? Taken directly from w3schools.com, "block: displays an element as a block element like <p>".
display:block;如果你想让你的元素表现出来，为什么要使用inline？直接取自 w3schools.com，“块：将元素显示为块元素，如<p>”。
We all know that when you use <p>the next element is automatically placed on a new line. So if you want your <label>and <input>elements to be side by side, you must use display:inlineor inline-block.
我们都知道当你使用<p>下一个元素时会自动换行。因此，如果您希望<label>和<input>元素并排放置，则必须使用display:inlineor inline-block。
回答by somdow
Just do
做就是了
<label for="one">One:</label> <input type="text" id="one"> <br>
Thats it. enjoy
就是这样。请享用
Edit: expanding on what Hardy said, wrapping them in a div or span will give you more flixibility later down the line but if your only concern is to get it all in one line, just put it like i wrote above.
编辑：扩展 Hardy 所说的内容，将它们包装在 div 或 span 中会给你更多的灵活性，但如果你唯一关心的是将它们全部放在一行中，就像我上面写的那样。
