как вставить разрывы строк в документы html с помощью css

<p>я пишу веб-сервис и хочу вернуть данные в формате xhtml. поскольку это данные, а не разметка, я хочу, чтобы они были очень чистыми - без лишних <code><div></code>s или <code><span></code>s. однако для удобства разработчиков я бы также хотел, чтобы возвращаемые данные были разумно читаемыми в браузере. для этого, я думаю, хороший способ сделать это - использовать css. </p><p>то, что я специально хочу сделать, это вставить разрывы строк в определенных местах. мне известно о display: block, но он не работает в ситуации, которую я сейчас пытаюсь обработать - форма с полями <input>. что-то вроде этого: </p><pre><code><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> </code></pre><p>я бы хотел, чтобы он отображался так, чтобы каждая метка отображалась в той же строке, что и соответствующее поле ввода. я пробовал это: </p><pre class="lang-css prettyprint-override"><code>input.a:after { content: "\a" } </code></pre><p>но это, похоже, ничего не делает. </p>

<p>лучше всего обернуть все ваши элементы в элементы меток, а затем применить css к меткам. псевдоклассы: before и: after полностью не поддерживаются согласованным образом.</p><p>метки имеют множество преимуществ, включая расширенный доступ (на нескольких уровнях) и многое другое.</p><pre><code><label> thingy one: <input type="text" name="one">; </label> </code></pre><p>затем используйте css на элементах метки ...</p><pre class="lang-css prettyprint-override"><code>label {display:block;clear:both;} </code></pre>

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

<p>похоже, у вас есть куча элементов формы, которые вы хотели бы показать в списке, верно? хм ... если бы только эти ребята из спецификации html думали включить разметку для обработки списка элементов ...</p><p>я бы порекомендовал вам настроить его так:</p><pre><code><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> </code></pre><p>тогда css становится намного проще.</p>

<p>следующее даст вам новые строки. это также привело бы к появлению лишних пробелов впереди ... вам бы пришлось испортить отступы, убрав табуляции.</p><pre class="lang-css prettyprint-override"><code>form { white-space: pre } </code></pre>

<pre><code><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> </code></pre><p>и следующий css</p><pre><code>form label { display: block; } </code></pre>

<pre><code><style type="text/css"> label, input { float: left; } label { clear:left; } </style> <form> <label>thing 1:</label><input /> <label>thing 2:</label><input /> </form> </code></pre>

<p>одним из вариантов является указание шаблона xslt в вашем xml, который (некоторые) браузеры будут обрабатывать, позволяя вам включать презентацию с разметкой, css, цветами и т.д., которые не должны влиять на пользователей веб-службы.</p><p>попав в xhtml, вы можете просто добавить некоторые отступы вокруг элементов с помощью css, например,.</p><p>form input.a {margin-bottom: 1em}</p>

<p>секрет заключается в том, чтобы окружить всю вашу вещь, ярлык и виджет в промежутке, класс которого выполняет блокировку и очистку:</p><pre><code><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> </code></pre>

<p>я согласен с джоном милликиным. вы можете добавить теги <code><span></code> или что-то около каждой строки с определенным классом css, а затем заставить их отображать: block при необходимости. единственный другой способ, которым я могу подумать, это сделать <code><input></code> встроенным блоком и заставить их испускать "очень большой" отступ справа, что приведет к сворачиванию встроенного содержимого.</p><p>тем не менее, лучше всего логически сгруппировать данные в теги <code><span></code> (или аналогичные), чтобы указать, что эти данные принадлежат друг другу (а затем позволить css выполнить позиционирование).</p>

<p>элемент css clear - это, вероятно, то, что вы ищете, чтобы получить перевод строки . </p><blockquote> <p>#login формы ввода { ясно: оба; }</p> </blockquote><p>позаботится о том, чтобы никакие другие плавающие элементы не оставались по обе стороны от ваших полей ввода.</p><p> <a href="http://www.w3schools.com/css/pr\_class\_clear.asp">ссылка</a> </p>