我怎樣才能讓我的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>