Html 如何将 Web 表单元素放在新行上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10349276/
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
How to put web form elements on a new line?
提问by Klausos Klausos
How to place "input" elements on new lines? In the above example all elements are placed sequentially, ie lable->input->lable->input, etc.
如何在新行上放置“输入”元素？在上面的例子中，所有元素都是按顺序放置的，即标签->输入->标签->输入等。
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
padding:14px;
}
#stylized{
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-size:11px;
font-weight:bold;
text-align:right;
float:left;
}
#stylized input{
float:left;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
/* --------- End of Form --------- */
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Data</h1>
<label>Name: </label>
<input type="text" name="name" id="name"/>
<label>Email: </label>
<input type="text" name="email" id="email"/>
<label>Password: </label>
<input type="text" name="password" id="password"/>
</form>
</div>
回答by KBN
#stylized input{
display: block;
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
}
This will put every input on a new line. - Removed "float: left", added "display: block".
这会将每个输入放在一个新行上。- 删除了“浮动：左”，添加了“显示：块”。
回答by Hemachandra Ghanta
I put them under list tags and it worked without changing styles and using a break tag is obsolete
我将它们放在列表标签下，它在不改变样式的情况下工作，并且使用中断标签已过时
<ul>
<li><input type = "text" name = "selection" value = "text1" /> Text1</li>
<li><input type = "text" name = "selection" value = "text2" /> Text2</li>
</ul>
回答by Elias Van Ootegem
My guess is user1359163's anwswer will help, though you might care to know why: using floateffectively removes the element out of the document's normal flow, a bit like changing the z-index, allowing the element to flow over div borders, labels, spans and... 'ignore' clearstyles.
我的猜测是 user1359163 的回答会有所帮助，尽管您可能想知道原因： usingfloat有效地将元素从文档的正常流中删除，有点像更改z-index，允许元素流过 div 边框、标签、跨度和... “忽略”clear样式。
The element behaves as if it floats over the other elements, so in that respect, it stays clear of the left and right of all other elements that don't float.
I'm no CSS expert, but this way of looking at it has helped me a lot in solving issues with mangled layouts I've encountered when using the float, clearand z-indexstyles.
该元素的行为就好像它漂浮在其他元素上一样，因此在这方面，它与所有其他不漂浮的元素的左侧和右侧保持清晰。我不是 CSS 专家，但这种看待它的方式帮助我解决了在使用float,clear和z-index样式时遇到的错位布局问题。
回答by BugFinder
Have you tried anything as simple as
你有没有尝试过像
<label>Name: </label><br>
<input type="text" name="name" id="name"/>
<label>Email: </label><br>
<input type="text" name="email" id="email"/>
回答by naim shaikh
回答by Smamatti
You prevent new lines when selecting a floating layout with enough room for all elements.
选择具有足够空间容纳所有元素的浮动布局时，您可以防止出现新行。
Try this:
尝试这个：
Samplehttp://jsfiddle.net/8yZff/
#stylized label{
font-size:11px;
font-weight:bold;
text-align:right;
}
#stylized input{
font-size:11px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:70px;
margin:2px 0 20px 10px;
display: block;
}
回答by Jukka K. Korpela
For tabular data, such as an array of label/field pairs, use a table. You will find styling much easier, and nonstyled appearance much better.
对于表格数据，例如标签/字段对数组，请使用table. 你会发现造型要容易得多，非风格的外观要好得多。
