it-swarm-ru.tech

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

Я пишу веб-сервис и хочу вернуть данные в формате XHTML. Поскольку это данные, а не разметка, я хочу, чтобы они были очень чистыми - без лишних <div>s или <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" }

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

38
Craig Andera

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

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

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

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

label {display:block;clear:both;}
54
BrewinBombers

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

41
Jim

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

12
Jon Galloway

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

form { white-space: pre }
4
Jimmy
<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; }
2
daniels
<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

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

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

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

form input.a {margin-bottom: 1em}

2
DamienG

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

<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>
1
D-n Russler

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

0
lordscarlet

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

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

0
Thunder3

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

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

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

Ссылка

0
Leo Utskot