How to insert line breaks in HTML documents using CSS


Tags: html,css

Problem :

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.



Solution :

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

    CSS Howto..

    How to place an image and text under it, side by side using HTML and css?

    How to ignore css class

    How to add javascript expression's output to my CSS?

    jQuery UI sortable: how to leave css values of changed items untouched?

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How to say that you need to turn your mobile phone in javascript/css? [closed]

    Why is my text not showing in my DIV?

    How to set a CSS property with a variable in JQuery?

    jquery style sheet switcher - how to effect only theme css?

    How to make a floated element take the entire width of its parent

    How to fully stretch 2 embeded divs?

    How can I change the css of this when I click on anything but this?

    How Do I Wrap Text So My Accordions Image Does Go OutSide My aAccordion

    how to remove 2nd 0r 4th div padding with Pure CSS not jquery

    CSS: how can I make this table fit the border when resized?

    How to create a firefox addon which injects CSS into a page? [closed]

    CSS + Show Animated GIF while Loads

    How to combine class and ID in CSS selector?

    How to debug html code for which css is being applied? [duplicate]

    How to start off on a tab built in javascript/html instead of it being blank and having to click on one

    How to double an image size in HTML using only CSS?

    How to override display: table cell

    How to make sure that two divs appear side by side? [closed]

    How can I exclude a hover effect with CSS

    How to make image 3D using CSS

    Animate Chartist on show

    How to get the Tololtip Tail for Menu

    How to prevent image moving when resizing window

    How to remove all CSS property inside a class, but don't remove class using jQuery

    How to create CSS styled dom element inside Google Maps InfoWindow?