Html 对齐标签和输入（浮动与显示内联块）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17559394/
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
align label and input (float vs display inline block)
提问by user765368
I have two examples of a label and a text field that I'm trying to align (You can see it in this fiddle). In the first example I have a label and a text field like this:
我有两个我正在尝试对齐的标签和文本字段的示例（您可以在这个小提琴中看到它）。在第一个示例中，我有一个标签和一个文本字段，如下所示：
<label for="firstname" style="width:100px;display:inline-block;background-color:red;">Firstname: </label>
<input type="text" style="margin:0;padding:0;" id="firstname" name="firstname" value="" />
In the second example, I have a label and a three floated text fields in a div like this:
在第二个示例中，我在 div 中有一个标签和三个浮动文本字段，如下所示：
<div>
<div style="width:100px;float:left;background-color:red;">Date: </div>
<div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="float:left;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
</div>
As you can see above, I give each label a width of 100px, but for some reason, in the second example, there is no space between my label and the first text field. Does anybody know why this is happening and why my width of 100px does not seem to have any effect in my second example (view fiddle link above).
正如您在上面看到的，我给每个标签的宽度设置为 100 像素，但出于某种原因，在第二个示例中，我的标签和第一个文本字段之间没有空格。有谁知道为什么会发生这种情况以及为什么我的 100px 宽度在我的第二个示例中似乎没有任何影响（查看上面的小提琴链接）。
Thank you
谢谢
回答by PSL
You can use inline-blockinstead of floatto make it appear as of the previous section to get the margin effect else you need to add a margin with floated element.
您可以使用inline-block而不是float让它像上一节一样出现以获得边距效果，否则您需要添加带有浮动元素的边距。
<div style="width:100px;display:inline-block;vertical-align:top;background-color:red;">Date: </div>
<div style="display:inline-block;">
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="day" name="day" maxlength="2" size="2" value="" /> / <br />
<label for="day">Day</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="month" name="month" maxlength="2" size="2" value="" /> / <br />
<label for="month">Month</label>
</div>
<div style="display:inline-block;">
<input type="text" style="margin:0;padding:0;" id="year" name="year" maxlength="4" size="4" value="" /><br />
<label for="year">Year</label>
</div>
</div>
or add a margin.
或添加边距。
<div style="width:100px;float:left;margin-right:4px;background-color:red;">Date: </div>
On a side note, consider using css rules instead of inline styles
附带说明，请考虑使用 css 规则而不是内联样式
回答by koningdavid
The space is because the first element is a replaced inline element, which kinda has the same behaviour as inline-block and adds margin.
空格是因为第一个元素是替换的内联元素，它与 inline-block 具有相同的行为并添加了边距。
And for the width, remove size="2"and maxlength="2"to make it the same with as the upper input fields
对于宽度，删除size="2"并maxlength="2"使其与上部输入字段相同
回答by TCD Factory
Well first of all your first example with the "Firstname" label is using a "label" tag which is treated differently then a "div". That brings me to the second example of "Date" which is surrounded by "div" tags. Because of this, the default way for the browser to handle them is different.
首先，您的第一个带有“名字”标签的示例使用的是“标签”标签，该标签的处理方式与“div”不同。这让我想到了被“div”标签包围的“Date”的第二个例子。因此，浏览器处理它们的默认方式是不同的。
You could easily compensate for this difference by adding a right margin to the label using the "div" to surround it.
您可以通过使用“div”围绕标签向标签添加右边距来轻松补偿这种差异。
<div style="width:100px;float:left;background-color:red; margin-right:5px;">Date: </div>
Although it is ok to use inline styles, I would suggest if you are going to be using this in a larger document to put this inside a external CSS file and use a class (or ID) for the div instead.
尽管可以使用内联样式，但我建议您是否要在更大的文档中使用它，将其放在外部 CSS 文件中，并为 div 使用类（或 ID）。
