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;

在标签或输入上。

注意：正如评论中所指出的，如果您想要 divs ，您还需要从包含div中删除float样式出现在彼此之下。

Answer 2

您可以将label和input放在自己的div中，也可以将每个display: block设置为CSS。

Answer 3

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

将标签放入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" />

查看结果：http://jsfiddle.net/uUEn8/ 您也可以在标签或输入上设置display:block。

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>

如何让我的DIV显示在彼此之下

6 个答案: