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

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

Вещь, которую я конкретно хочу сделать, состоит в том, чтобы вставить разрывы строки в определенных местах. Я знаю display: block, но это действительно не работает в ситуации, которую я пытаюсь обработать теперь - a form с <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" }

Но это, казалось, ничего не сделало.

39
задан Priyanga 19 November 2019 в 13:25
поделиться

12 ответов

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

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

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

тогда CSS использования на Ваших элементах маркировки...

label {display:block;clear:both;}
54
ответ дан thanksd 27 November 2019 в 02:09
поделиться

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

41
ответ дан Jim 27 November 2019 в 02:09
поделиться

Похоже, что у Вас есть набор объектов формы, которые требуется показать в списке, правильно? Хм..., если только те парни спецификации 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 27 November 2019 в 02:09
поделиться

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

form { white-space: pre }
4
ответ дан thanksd 27 November 2019 в 02:09
поделиться
<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 27 November 2019 в 02:09
поделиться
<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 27 November 2019 в 02:09
поделиться

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

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

форма input.a {граничная нижняя часть: 1em}

2
ответ дан DamienG 27 November 2019 в 02:09
поделиться

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

<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
ответ дан Jason Plank 27 November 2019 в 02:09
поделиться

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

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

0
ответ дан Thunder3 27 November 2019 в 02:09
поделиться

Ясный элемент CSS, вероятно, что Вы ищете получить разрывы строки. Что-то вперед:

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

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

Ссылка

0
ответ дан 27 November 2019 в 02:09
поделиться

Параметры сценария JavaScript на всем протяжении усложнения вещей. Сделайте как Jon Galloway или предложенный daniels0xff.

0
ответ дан lordscarlet 27 November 2019 в 02:09
поделиться

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

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

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

-1
ответ дан Dergachev 27 November 2019 в 02:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: