Как я могу сделать так, чтобы мои разделы отображались друг под другом

#css

Вопрос:

У меня есть следующее:

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

Ответ №1:

Установить

 display: block;

либо на ярлыке, либо на входных данных.

Примечание: Как указано в комментарии, вам также нужно будет удалить float стиль из вашего содержащего div, если вы хотите, чтобы divs отображались друг под другом.

1. Не забудьте удалить float в DIV. В противном случае это не сработает

2. Даже если содержащийся div плавающий, display: block входные данные будут отображаться под меткой. Однако сохранение float позволило бы нескольким парам меток / входных данных отображаться рядом.

3. в этом проблема. В названии также указывается, что разделы должны располагаться друг под другом. Не рядом.

4. Хм. Об этом говорится в названии, не так ли? Однако в вопросе нет и намека на это…

5. Спасибо всем за вашу помощь. Я пометил это правильно, поскольку это первое решение, которое было опубликовано и которое сработало. Хотелось бы отметить больше как правильные.

Ответ №2:

Почему бы не удалить значение float в DIV и не сделать метку блоком?

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

Ответ №3:

Вы можете поместить label и input в их собственные div s или задать каждому значение display: block в CSS.

Ответ №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 либо на ярлыке, либо на входе.

Ответ №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 /

Ответ №6:

Поскольку все решения CSS были исчерпаны, вот HTML-решение с <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>