Html 表单域之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16379187/
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
spacing between form fields
提问by Mika H.
I have an HTML form element:
我有一个 HTML 表单元素：
<form action="doit" id="doit" method="post">
Name <br/>
<input id="name" name="name" type="text" /> <br/>
Phone number <br/>
<input id="phone" name="phone" type="text" /> <br/>
Year <br/>
<input id="year" name="year" type="text" /> <br/>
</form>
I would like there to be a little more space between the fields, for example, between the lines
我希望字段之间有更多空间，例如，行之间
<input id="name" name="name" type="text" /> <br/>and
Phone number <br/>,
<input id="name" name="name" type="text" /> <br/>并且
Phone number <br/>，
and also between
以及之间
<input id="phone" name="phone" type="text" /> <br/>and Year <br/>.
<input id="phone" name="phone" type="text" /> <br/>和Year <br/>。
How can I do it?
我该怎么做？
回答by Turnip
In your CSS file:
在您的 CSS 文件中：
input { margin-bottom: 10px; }
回答by Steve Robbins
I would wrap your rows in labels
我会把你的行用标签包起来
<form action="doit" id="doit" method="post">
<label>
Name
<input id="name" name="name" type="text" />
</label>
<label>
Phone number
<input id="phone" name="phone" type="text" />
</label>
<label>
Year
<input id="year" name="year" type="text" />
</label>
</form>
And use
并使用
label, input {
display: block;
}
label {
margin-bottom: 20px;
}
Don't use brs for spacing!
不要使用brs 作为间距！
Demo: http://jsfiddle.net/D8W2Q/
演示：http: //jsfiddle.net/D8W2Q/
回答by mixtou
A simple between input fields would do the job easily...
一个简单的 在输入字段之间可以轻松完成工作......
回答by Dulith De Costa
<form>
<div class="form-group">
<label for="nameLabel">Name</label>
<input id="name" name="name" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="PhoneLabel">Phone</label>
<input id="phone" name="phone" class="form-control" type="text" />
</div>
<div class="form-group">
<label for="yearLabel">Year</label>
<input id="year" name="year" class="form-control" type="text" />
</div>
</form>
