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

<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>

Answer 2

Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label> and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: left to the <label> elements.

Answer 3

The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:

CSS

<style type="text/css">
  .lb {
    display:block;
    clear:both;
  }
</style>

HTML

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

Answer 4

I agree with John Millikin. You can add in <span> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.

Even so, your best bet is to logically group the data up in <span> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).

Answer 5

the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.

form { white-space: pre }

Answer 6

The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.