twitter-bootstrap Html 表单标签换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16010296/
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
Html form label line breaks
提问by sergej.art
i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
我需要一个 twitter bootstrap 表单，输入文本框在同一行，但它的标签必须在输入框的顶部。
So far i have:
到目前为止，我有：
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
So i need inputs on the same line and labels must be on the top of each input.
所以我需要在同一行输入，标签必须在每个输入的顶部。
How do i do that?
我怎么做？
采纳答案by wazaminator
you can put a div around each label and block, and in the css put this div in inline-bloc
您可以在每个标签和块周围放置一个 div，并在 css 中将此 div 放入 inline-bloc
like :
喜欢 ：
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
并在 CSS 中：
.css{
display : inline-block;
}
回答by Rick Hoving
Another solution is putting a div around each label/input combination and setting the css to float left HTML
另一个解决方案是在每个标签/输入组合周围放置一个 div 并将 css 设置为浮动左 HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
CSS
form div{
float: left
}
回答by mpgn
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
如果您使用 Bootstrap，则需要使用 bootstrap 的 css！利用class="form-horizontal" or class="form-inline"
You can try this with no css added :
您可以在不添加 css 的情况下尝试此操作：
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
简单不？
回答by wazaminator
You could also just use <br />. It will work for a form as well.
你也可以只使用<br />. 它也适用于表单。
