Разрыв строки после ввода без HTML-разметки - PullRequest
Новая
       27

Разрыв строки после ввода без HTML-разметки

6 голосов
/ 07 октября 2010

Я пытаюсь отобразить количество входов и соответствующие им метки.Оба они являются встроенными элементами, и у меня есть рабочее решение с добавлением тега br в конце, например, 

<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />

Я бы хотел решить эту проблему без лишней разметки HTML, то есть с помощью CSS.Какой самый простой способ сделать это?

Я видел другие вопросы, подобные этому, но с выравниванием по строке, а не по столбцу.

Ответы [ 2 ]

12 голосов
/ 07 октября 2010

Вы можете обернуть метки вокруг ваших входов и отобразить их в виде блоков: 

<style>
  label { display: block; }
</style>

<label>
  Hello: <input name="hello">
</label>
<label>
  StackOverflow: <input name="stackoverflow">
</label>

Обратите внимание, что при этом вам не нужно использовать атрибут for="name".

Другой способ (если вы не хотите, чтобы метки были обернуты вокруг ваших входных данных), это переместить метки влево: 

<style>
  label { float: left; clear: left; }
</style>

Однако я обычно предпочитаю немного больше разметки, которая соединяет label и input в один логический элемент, называемый field : 

<div class="field">
  <label for="hello">Hello</label>
  <input name="hello">
</div>
<div class="field">
  <label for="stackoverflow">Stackoverflow</label>
  <input name="stackoverflow">
</div>

Поскольку каждое поле является div, оно будет автоматически отображаться как блок, но вы также можете управлять им для отдельных полей.

1 голос
/ 07 октября 2010

Попробуйте установить display:inline-block для элементов input и label.Таким образом, вы можете добавить все специфичные для блочных элементов css, такие как witdh или margin-bottom.

. Вы также можете установить input и label на display:block и добавить margin-bottom только к входу,Или вы можете повернуть его вспять и добавить верхнюю границу к вашим меткам;)

Если вы хотите удалить поля на последнем элементе, вы можете использовать input:last-child {margin-bottom:0;}

input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}

/* Or to be specific you can use the attribut-selector
   which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}
...