How to insert line breaks in HTML documents using CSS

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

s or

相关标签:

Answer 1

Use javascript. If you're using the jQuery library, try something like this:

$("input.a").after("<br/>")

Or whatever you need.

Answer 2

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.

Once in XHTML you could simply add some padding around the elements with CSS, e.g.

form input.a { margin-bottom: 1em }

Answer 3

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

I'd recommend you set it up like this:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Then the CSS gets a lot easier.

Answer 4

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

Answer 5

<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

and the following css

form label { display: block; }

Answer 6

The CSS clear element is probably what you are looking for the get linebreaks. Something along:

#login form input { clear: both; }

will make sure the no other floating elements are left to either side of you input fields.

Reference