我怎样才能让我的DIV下方出现相互

Question

我有以下几点：

<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> 

我想使输入字段出现在标签下面。现在它只是在同一行上的标签之后。有没有办法，我可以用CSS来做到这一点？

Answer 1

要么标签或输入上设置

display: block; 

。

注：正如评论指出的那样，你也会需要如果你想的div出现低于对方从包含分区删除float风格。一个div里面

Answer 2

您可以将label和input放在它们自己的div中，或在CSS中分别设置为display: block。

Answer 3

放标签：

<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" /> 

看到成绩：http://jsfiddle.net/uUEn8/ 您还可以设置两种标签或者输入上display:block。

Answer 4

为什么不移除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> 

演示：http://jsfiddle.net/h7mnJ/

Answer 5

你可以把display: block在标签上：

.editor-label { 
    display: block; 
} 

例子：http://jsfiddle.net/ambiguous/b5UrP/

或者你也可以浮动两个标签和输入到左边，把输入上的clear: left：

.editor-label { 
    float: left; 
} 
.editor-field { 
    clear: left; 
    float: left; 
} 

例子：http://jsfiddle.net/ambiguous/hxhCx/

Answer 6

由于所有的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>