Как вставить разрывы строк в документы 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

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

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

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

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

label {display:block;clear:both;}

Answer 2

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

Answer 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 станет намного проще.

Answer 4

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

form { white-space: pre }

Answer 5

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

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

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

Answer 7

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

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

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

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

Answer 9

Опции javascript повсюду усложняют вещи. Сделайте так, как предложили Джон Галлоуэй или Дэниелс 0хфф.

Answer 10

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

# форма входа в систему { ясно: оба; }

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

1010 * Reference *