CSS 如何让我的 DIV 出现在彼此下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5925741/
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 can I make my DIVs appear below each other
提问by MikeSwanson
I have the following:
我有以下几点：
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
I want to make the input field appear below the label. Right now it just follows the label on the same line. Is there a way that I can do this with CSS?
我想让输入字段出现在标签下方。现在它只是跟在同一行的标签后面。有没有办法用 CSS 做到这一点？
回答by John Flatness
Set
放
display: block;
on either the label or the input.
在标签或输入上。
Note:As pointed out in a comment, you'd also need to remove the floatstyle from your containing div if you want the divsto appear below each other.
注意：正如评论中所指出的，float如果您希望div出现在彼此下方，您还需要从包含的 div 中删除样式。
回答by Josh M.
You can put the labeland the inputin their own divs or set each to display: blockin CSS.
您可以将label和input放在它们自己的divs 中或display: block在 CSS中将每个设置为。
回答by JohnP
Why not remove the float on the DIV and make the LABEL a block?
为什么不移除 DIV 上的浮点数并使 LABEL 成为一个块？
<div style=" padding-right: 1%;">
<label class="editor-label" style='display:block;' for="BrowserTitle">Browser Title</label>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
Demo : http://jsfiddle.net/h7mnJ/
回答by Kamyar
put label inside a div:
将标签放在 div 中：
<div style="float: left; padding-right: 1%;">
<div>
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<div>
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
See the results at: http://jsfiddle.net/uUEn8/Also you can set display:blockon either label or input.
查看结果：http: //jsfiddle.net/uUEn8/您也可以设置display:block标签或输入。
回答by mu is too short
You can put display: blockon the label:
你可以display: block贴上标签：
.editor-label {
display: block;
}
Example: http://jsfiddle.net/ambiguous/b5UrP/
示例：http: //jsfiddle.net/ambiguous/b5UrP/
Or you could float both the label and input to the left and put clear: lefton the input:
或者您可以将标签和输入都浮动到左侧并放在clear: left输入上：
.editor-label {
float: left;
}
.editor-field {
clear: left;
float: left;
}
Example: http://jsfiddle.net/ambiguous/hxhCx/
回答by Blender
As all of the CSS solutions have been exhausted, here's a HTML solution with the <br />element:
由于所有的 CSS 解决方案都已用尽，这里有一个包含该<br />元素的 HTML 解决方案：
<div style="float: left; padding-right: 1%;">
<label class="editor-label" for="BrowserTitle">Browser Title</label>
<br />
<input class="editor-field" id="BrowserTitle" name="Question.BrowserTitle" size="30" type="text" value="Test title" />
</div>
