Question

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?

Answer 1

Set

display: block;

on either the label or the input.

Note: As pointed out in a comment, you d also need to remove the float style from your containing div if you want the divs to appear below each other.

Answer 2

为什么不要将浮标移出,使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 :。

Answer 3

You can put the label and the input in their own divs or set each to display: block in CSS.

Answer 4

put label inside a 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:block on either label or input.

Answer 5

You can put display: block on the label:

.editor-label {
    display: block;
}

Example: http://jsfiddle.net/ambiguous/b5UrP/

Or you could float both the label and input to the left and put clear: left on the input:

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

Example: http://jsfiddle.net/ambiguous/hxhCx/

Answer 6

由于所有CSS解决方案都已用尽,因此此处的“超文本”解决办法与<代码><br />要素:

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

友情链接