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 do I keep a CSS hover rule applied when the mouse moves to the child element?

    How do I create triangles like this? [closed]

    How can I show a loading screen while a really large image is loading?

    How to activate jQuery function with img instead of button?

    How to get the CSS left, top, width, height from coords?

    CSS Column Help: How do I get a column within a column?

    How to use webpack and css-loader to load only specific css class?

    toggle show/hide for hidden menu buttons (responsive)

    CSS: How can i divide a border into two lines? [duplicate]

    How to use easeOutBounce animiation on display block?

    @media query device - how to portrait one css, landscape other?

    How to check if user is in high contrast mode via JavaScript or CSS

    Navbar doesn't scroll to show links on smaller devices when using nicescroll plug-in

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to add two class styles to anchor tag

    How to Set an if in css for opera browser? [duplicate]

    How to Wrap Text Within an Image-Link? HTML CSS

    How to keep footer at the bottom even with dynamic height website

    How to do responsive text overflow with css?

    How to create Box Shadow rollover and hover css navigation?

    How to get smaller divs to stack to the right of larger divs?

    Where do I put my CSS, how do I link to it from the master page?

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    How to copy the GTK style of a widget and apply it to another?

    How to use ­ and the CSS “hyphens” property together?

    python how to parse css file as key value [closed]

    How to give sentence case to sentences through CSS or javascript? [closed]

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    Chrome Developer Tools: How to find out what is overriding a CSS rule?