<p>I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <code>&lt;div&gt;</code>s or <code>&lt;span&gt;</code>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS. </p>

<p>The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of <code>display: block</code>, but it doesn't really work in the situation I'm trying to handle now - a <code>form</code> with <code>&lt;input&gt;</code> fields. Something like this: </p>

<pre><code>&lt;form&gt;
  Thingy 1: &lt;input class="a" type="text" name="one" /&gt;
  Thingy 2: &lt;input class="a" type="text" name="two" /&gt;
  Thingy 3: &lt;input class="b" type="checkbox" name="three" /&gt;
  Thingy 4: &lt;input class="b" type="checkbox" name="four" /&gt;
&lt;/form&gt;
</code></pre>

<p>I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this: </p>

<pre class="lang-css prettyprint-override"><code>input.a:after { content: "\a" }
</code></pre>

<p>But that didn't seem to do anything. </p>

[{'answer_id': 65871, 'author': 'DamienG', 'author_id': 5720, 'author_profile': 'https://Stackoverflow.com/users/5720', 'pm_score': 2, 'selected': False, 'text': "<p>One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.</p>\n\n<p>Once in XHTML you could simply add some padding around the elements with CSS, e.g.</p>\n\n<p>form input.a { margin-bottom: 1em }</p>\n"}, {'answer_id': 65929, 'author': 'Dergachev', 'author_id': 9621, 'author_profile': 'https://Stackoverflow.com/users/9621', 'pm_score': -1, 'selected': False, 'text': '<p>Use javascript. If you\'re using the jQuery library, try something like this:</p>\n\n<pre><code>$("input.a").after("&lt;br/&gt;")\n</code></pre>\n\n<p>Or whatever you need.</p>\n'}, {'answer_id': 65941, 'author': 'Thunder3', 'author_id': 2832, 'author_profile': 'https://Stackoverflow.com/users/2832', 'pm_score': 0, 'selected': False, 'text': '<p>I agree with John Millikin. You can add in <code>&lt;span&gt;</code> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <code>&lt;input&gt;</code> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.</p>\n\n<p>Even so, your best bet is to logically group the data up in <code>&lt;span&gt;</code> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).</p>\n'}, {'answer_id': 65946, 'author': 'Jimmy', 'author_id': 4435, 'author_profile': 'https://Stackoverflow.com/users/4435', 'pm_score': 2, 'selected': False, 'text': '<p>the following would give you the newlines. It would also put extra spaces out in front though... you\'d have to mess up your source indentation by removing the tabbing.</p>\n\n<pre class="lang-css prettyprint-override"><code>form { white-space: pre }\n</code></pre>\n'}, {'answer_id': 65950, 'author': 'BrewinBombers', 'author_id': 5989, 'author_profile': 'https://Stackoverflow.com/users/5989', 'pm_score': 7, 'selected': True, 'text': '<p>It\'d be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.</p>\n\n<p>Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.</p>\n\n<pre><code>&lt;label&gt;\n    Thingy one: &lt;input type="text" name="one"&gt;;\n&lt;/label&gt;\n</code></pre>\n\n<p>then use CSS on your label elements...</p>\n\n<pre class="lang-css prettyprint-override"><code>label {display:block;clear:both;}\n</code></pre>\n'}, {'answer_id': 65979, 'author': 'Jon Galloway', 'author_id': 5, 'author_profile': 'https://Stackoverflow.com/users/5', 'pm_score': 4, 'selected': False, 'text': '<p>It looks like you\'ve got a bunch of form items you\'d like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...</p>\n\n<p>I\'d recommend you set it up like this:</p>\n\n<pre><code>&lt;form&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;label&gt;Thingy 1:&lt;/label&gt;&lt;input class="a" type="text" name="one" /&gt;&lt;/li&gt;\n    &lt;li&gt;&lt;label&gt;Thingy 1:&lt;/label&gt;&lt;input class="a" type="text" name="one" /&gt;&lt;/li&gt;\n &lt;/ul&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>Then the CSS gets a lot easier.</p>\n'}, {'answer_id': 66000, 'author': 'Jim', 'author_id': 8427, 'author_profile': 'https://Stackoverflow.com/users/8427', 'pm_score': 5, 'selected': False, 'text': "<p>Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should.  One of these things is generated content - it doesn't work for form controls.  Instead, wrap the labels in <code>&lt;label&gt;</code> and use <code>label:before { content: '\\a' ; white-space: pre; }</code>.  You can also do it by floating everything and adding <code>clear: left</code> to the <code>&lt;label&gt;</code> elements.</p>\n"}, {'answer_id': 66019, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>The CSS clear element is probably what you are looking for the get linebreaks.\nSomething along:</p>\n\n<blockquote>\n  <p>#login form input {\n    clear: both;\n   }</p>\n</blockquote>\n\n<p>will make sure the no other floating elements are left to either side of you input fields.</p>\n\n<p><a href="http://www.w3schools.com/CSS/pr_class_clear.asp" rel="nofollow noreferrer">Reference</a></p>\n'}, {'answer_id': 66310, 'author': 'daniels', 'author_id': 9789, 'author_profile': 'https://Stackoverflow.com/users/9789', 'pm_score': 2, 'selected': False, 'text': '<pre><code>&lt;form&gt;\n   &lt;label&gt;Thingy 1: &lt;input class="a" type="text" name="one" /&gt;&lt;/label&gt;\n   &lt;label&gt;Thingy 2: &lt;input class="a" type="text" name="two" /&gt;&lt;/label&gt;\n   &lt;label&gt;Thingy 3: &lt;input class="b" type="checkbox" name="three" /&gt;&lt;/label&gt;\n   &lt;label&gt;Thingy 4: &lt;input class="b" type="checkbox" name="four" /&gt;&lt;/label&gt;\n&lt;/form&gt;\n</code></pre>\n\n<p>and the following css</p>\n\n<pre><code>form label { display: block; }\n</code></pre>\n'}, {'answer_id': 66337, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:</p>\n<p>CSS</p>\n<pre><code>&lt;style type=&quot;text/css&quot;&gt;\n  .lb {\n    display:block;\n    clear:both;\n  }\n&lt;/style&gt;\n</code></pre>\n<p>HTML</p>\n<pre><code>&lt;form&gt;\n  &lt;span class=&quot;lb&quot;&gt;Thingy 1: &lt;input class=&quot;a&quot; type=&quot;text&quot; name=&quot;one&quot; /&gt;&lt;/span&gt;\n  &lt;span class=&quot;lb&quot;&gt;Thingy 2: &lt;input class=&quot;a&quot; type=&quot;text&quot; name=&quot;two&quot; /&gt;&lt;/span&gt;\n  &lt;span class=&quot;lb&quot;&gt;Thingy 3: &lt;input class=&quot;b&quot; type=&quot;checkbox&quot; name=&quot;three&quot; /&gt;&lt;/span&gt;\n  &lt;span class=&quot;lb&quot;&gt;Thingy 4: &lt;input class=&quot;b&quot; type=&quot;checkbox&quot; name=&quot;four&quot; /&gt;&lt;/span&gt;\n&lt;/form&gt;\n</code></pre>\n'}, {'answer_id': 66338, 'author': 'Galen', 'author_id': 7894, 'author_profile': 'https://Stackoverflow.com/users/7894', 'pm_score': 2, 'selected': False, 'text': '<pre><code>&lt;style type="text/css"&gt;\nlabel, input { float: left; }\nlabel { clear:left; }\n&lt;/style&gt;\n\n&lt;form&gt;\n    &lt;label&gt;thing 1:&lt;/label&gt;&lt;input /&gt;\n    &lt;label&gt;thing 2:&lt;/label&gt;&lt;input /&gt;\n&lt;/form&gt;\n</code></pre>\n'}, {'answer_id': 75845, 'author': 'Doug Moore', 'author_id': 13179, 'author_profile': 'https://Stackoverflow.com/users/13179', 'pm_score': 0, 'selected': False, 'text': '<p>The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.</p>\n'}]
['https://Stackoverflow.com/questions/65849', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/-1/']