Как вставлять разрывы строк в HTML-документы с помощью CSS

Один из вариантов - указать шаблон XSLT в вашем XML, который (некоторые) браузеры будут обрабатывать, позволяя вам включать представление с разметкой, CSS, цветами и т. д., Которые не должны влиять на потребителей веб-службы.

Находясь в XHTML, вы можете просто добавить некоторые отступы вокруг элементов с помощью CSS, например.

форма input.a {margin-bottom: 1em}

Используйте javascript. Если вы используете библиотеку jQuery, попробуйте что-нибудь вроде этого:

$("input.a").after("<br/>")

Или что вам нужно.

Я согласен с Джоном Милликиным. Вы можете добавить теги <span> или что-то еще вокруг каждой строки с определенным классом CSS, а затем при необходимости сделать их display: block. Единственный другой способ, который я могу придумать, - это сделать <input> встроенным блоком и заставить его выдавать «очень большие» padding-right, что приведет к переносу встроенного содержимого.

Даже в этом случае лучше всего логически сгруппировать данные в теги <span> (или аналогичные), чтобы указать, что эти данные принадлежат друг другу (а затем позволить CSS выполнить позиционирование).

следующее даст вам новые строки. Это также приведет к появлению дополнительных пробелов впереди ... вам придется испортить отступ в исходном тексте, удалив табуляцию.

form { white-space: pre }

Лучше всего обернуть все ваши элементы в элементы меток, а затем применить CSS к меткам. Псевдоклассы: before и: after не полностью поддерживаются согласованным образом.

Теги ярлыков имеют множество преимуществ, включая повышенную доступность (на нескольких уровнях) и многое другое.

<label>
    Thingy one: <input type = "text" name = "one">;
</label>

затем используйте CSS для элементов метки ...

label {display:block;clear:both;}

Похоже, у вас есть несколько элементов формы, которые вы хотите отобразить в списке, верно? Хм ... если бы только те ребята из спецификаций HTML подумали включить разметку для обработки списка элементов ...

Я бы порекомендовал вам настроить это так:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class = "a" type = "text" name = "one" /></li>
    <li><label>Thingy 1:</label><input class = "a" type = "text" name = "one" /></li>
 </ul>
</form>

Тогда CSS становится намного проще.

Элементы управления формы обрабатываются браузерами особым образом, поэтому многие вещи не обязательно работают должным образом. Одна из этих вещей - сгенерированный контент - он не работает для элементов управления формой. Вместо этого оберните этикетки в <label> и используйте label:before { content: '\a' ; white-space: pre; }. Вы также можете сделать это, перемещая все и добавляя clear: left к элементам <label>.

Элемент CSS clear, вероятно, - это то, что вы ищете для получения разрывов строк. Что-то рядом:

#login form input { clear: both; }

гарантирует, что никакие другие плавающие элементы не останутся по обе стороны от ваших полей ввода.

Ссылка

<form>
   <label>Thingy 1: <input class = "a" type = "text" name = "one" /></label>
   <label>Thingy 2: <input class = "a" type = "text" name = "two" /></label>
   <label>Thingy 3: <input class = "b" type = "checkbox" name = "three" /></label>
   <label>Thingy 4: <input class = "b" type = "checkbox" name = "four" /></label>
</form>

и следующий css

form label { display: block; }

Секрет в том, чтобы окружить всю вашу штуку, метку и виджет диапазоном, класс которого выполняет блокировку и очистку:

CSS

<style type = "text/css">
  .lb {
    display:block;
    clear:both;
  }
</style>

HTML

<form>
  <span class = "lb">Thingy 1: <input class = "a" type = "text" name = "one" /></span>
  <span class = "lb">Thingy 2: <input class = "a" type = "text" name = "two" /></span>
  <span class = "lb">Thingy 3: <input class = "b" type = "checkbox" name = "three" /></span>
  <span class = "lb">Thingy 4: <input class = "b" type = "checkbox" name = "four" /></span>
</form>

<style type = "text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>

Параметры javascript все усложняют. Сделайте так, как предлагали Джон Галлоуэй или daniels0xff.