Html 没有html标记的输入后换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3876836/
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
Break line after input without html markup
提问by Max
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
我正在尝试显示一些输入及其相应的标签。它们都是内联元素，我有一个可行的解决方案，在最后添加一个 br 标签，就像这样
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
我想在没有无关的 HTML 标记的情况下解决这个问题，即使用 CSS。什么是最简单的方法来做到这一点？
I have viewed other questions similar to this, but aligning by row instead of by column.
我查看过与此类似的其他问题，但按行而不是按列对齐。
回答by Andrew Vit
You can wrap the labels around your inputs and display them as blocks:
您可以将标签包裹在输入周围并将它们显示为块：
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name"attribute.
请注意，当您执行此操作时，您不需要使用该for="name"属性。
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
另一种方法（如果您不希望标签环绕在您的输入中）是将标签浮动到左侧：
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the labeland the inputinto one logical element, called a field:
但是，我通常更喜欢多一点标记，将label和连接input成一个逻辑元素，称为字段：
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
因为每个字段都是一个div，它会自动显示为一个块，但您也可以为单个字段控制它。
回答by gearsdigital
Try to set display:inline-blockfor your inputand labelelements. So you can add all block element specific css like witdhor margin-bottom.
尝试display:inline-block为您的input和label元素设置。因此，您可以添加所有块元素特定的 css，例如witdh或margin-bottom。
You can also set your inputand labelto display:blockand add margin-bottomonly to the the input. Or you can reverse it and add a margin-top to your labels ;)
您还可以将input和设置label为display:block并margin-bottom仅添加到输入。或者您可以反转它并在标签中添加边距顶部 ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
如果要删除最后一个元素的边距，可以使用 input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}
