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 keep an image and text (vmax font) aligned when resizing browser?

    how to override the specific style of spans in a div [span in a span ] using css or jquery?

    How to select a td by position of its relative th?

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How can I import a single string line of text to multiple HTML files?

    css/javascript - How to achieve these unusual design requirements? [closed]

    Attempting to show logo using 'content' from CSS

    How can I center a table relative to one column in HTML/CSS?

    How do I properly reference files in subdirectories (in xampp) for PHP, CSS, etc. on localhost?

    CSS - How to achieve a mixed effect of “float left” and “text-align: center”?

    how to zoom the background-image in ie8 with css

    Gulp : How to copy multiple files and keep the folder structure

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

    How does Outlook.com have the title text underlined?

    How to change color of selection in Select2 4.0.1?

    CSS: How do I stretch a background with a different z-index to height of page contents

    How to highlight the table row using jquery in Rails 3?

    How to style a GtkLabel with CSS?

    How to get dropdown menus to align with the correct menu tab

    How to position this using only CSS and no tables

    How do I isolate an image from the html so that I can edit where it goes on the website?

    How can I override an inline style with an external css?

    How to ignore CSS img styling for certain sections of the website?

    How to center a container and make webpage fit on mobile?

    How to remove a class as each image is loaded

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    How to add space after a colon in CSS with Sublime Text 2?

    how to show ng-repeat horizontal?

    How to adjust responsive behaviour of menu bar's elements

    How to prevent html div from expanding when text size is changed