Question

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 <div>s or <span>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.

The thing I specifically want to do is to insert linebreaks at certain places. I’m aware of display: block, but it doesn’t really work in the situation I’m trying to handle now – a form with <input> fields. Something like this:

<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> 

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

input.a:after { content: '\a' } 

But that didn’t seem to do anything.

Answer 1

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.

Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.

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

then use CSS on your label elements…

label {display:block;clear:both;}