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

Question

Я пишу веб-сервис и хочу вернуть данные в формате XHTML. Поскольку это данные, а не разметка, я хочу, чтобы они были очень чистыми - без лишних <div> с или <span> с. Однако для удобства разработчиков я также хотел бы сделать возвращаемые данные разумно читаемыми в браузере. Для этого, я думаю, что хороший способ сделать это - использовать CSS.

Что я конкретно хочу сделать, это вставить разрывы строк в определенных местах. Мне известно о display: block, но он не работает в ситуации, которую я сейчас пытаюсь обработать - форма с полями . Как то так:

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

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

input.a:after { content: "\a" }

Но это, похоже, ничего не делало.

Answer 1

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

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

Answer 2

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

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

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