Как вставить разрывы строк в документы HTML с помощью CSS
Я пишу веб-сервис и хочу вернуть данные в формате XHTML. Поскольку это данные, а не разметка, я хочу, чтобы они были очень чистыми - без лишних <div>с или <span>s. Однако для удобства разработчиков я также хотел бы сделать возвращаемые данные разумно читаемыми в браузере. Для этого, я думаю, что хороший способ сделать это - использовать 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" }
Но это, похоже, ничего не делает.
12 ответов
Лучше всего обернуть все ваши элементы в элементы меток, а затем применить css к меткам. Псевдоклассы:before и:after полностью не поддерживаются согласованным образом.
Метки имеют множество преимуществ, включая расширенную доступность (на нескольких уровнях) и многое другое.
<label>
Thingy one: <input type="text" name="one">;
</label>
затем используйте CSS на элементах метки...
label {display:block;clear:both;}
Элементы управления формой обрабатываются специально браузерами, поэтому многие вещи не обязательно работают должным образом. Одной из этих вещей является сгенерированный контент - он не работает для элементов управления формой. Вместо этого оберните этикетки в <label> и использовать label:before { content: '\a' ; white-space: pre; }, Вы также можете сделать это, плавая все и добавляя clear: left к <label> элементы.
Похоже, у вас есть куча элементов формы, которые вы хотели бы показать в списке, верно? Хм... если бы только эти ребята из спецификации 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 становится намного проще.
Следующее даст вам новые строки. Это также привело бы к появлению лишних пробелов впереди... вам бы пришлось испортить отступы, убрав табуляции.
form { white-space: pre }
<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; }
Одним из вариантов является указание шаблона XSLT в вашем XML, который (некоторые) браузеры будут обрабатывать, что позволяет включать презентацию с разметкой, CSS, цветами и т. Д., Которые не должны влиять на потребителей веб-службы.
Оказавшись в XHTML, вы можете просто добавить некоторые отступы вокруг элементов с помощью CSS, например
form input.a { margin-bottom: 1em }
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>
<form>
<label>thing 1:</label><input />
<label>thing 2:</label><input />
</form>
Секрет заключается в том, чтобы окружить всю вашу вещь, ярлык и виджет в промежутке, класс которого делает блок и очищает:
<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>
Я согласен с Джоном Милликиным. Вы можете добавить в <span> теги или что-то вокруг каждой строки с определенным классом CSS, а затем заставьте их отображать: блок при необходимости. Единственный способ, которым я могу думать, это сделать <input> встроенный блок и заставить их испускать "очень большие" отступы вправо, что заставит встроенный контент обернуться.
Тем не менее, вам лучше всего логически сгруппировать данные в <span> теги (или аналогичные), чтобы указать, что эти данные принадлежат друг другу (а затем позволить CSS делать позиционирование).
Опции javascript повсюду усложняют вещи. Сделайте так, как предложили Джон Галлоуэй или Даниэльс.
Элемент CSS clear - это, вероятно, то, что вы ищете для перевода строки. Что-то вместе:
#login form input {clear: both; }
позаботится о том, чтобы никакие другие плавающие элементы не оставались по обе стороны от ваших полей ввода.
Используйте JavaScript. Если вы используете библиотеку jQuery, попробуйте что-то вроде этого:
$("input.a").after("<br/>")
Или все, что вам нужно.