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

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

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

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

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

Ответ 1

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

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

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

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

label {display:block;clear:both;}

Ответ 2

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

Ответ 3

Похоже, у вас есть куча элементов формы, которые вы хотите показать в списке, не так ли? Хм... если бы только те разработчики 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 становится намного проще.

Ответ 4

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

form { white-space: pre }

Ответ 5

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

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

введите input.a {margin-bottom: 1em}

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

Элемент CSS clear - это, вероятно, то, что вы ищете для get linebreaks. Что-то вроде:

# ввод формы ввода { ясно: оба; }

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

Ссылка

Ответ 11

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

Ответ 12

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

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

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