Html form label line breaks

Question

i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.

So far i have:

<form action="#">
  <label for="city">City</label>
  <input type="text" id="city"/>
  <label for="street">Street</label>
  <input type="text" id="street"/>
</form>

http://jsfiddle.net/A8RaG/

So i need inputs on the same line and labels must be on the top of each input.

How do i do that?

Solution 1

you can put a div around each label and block, and in the css put this div in inline-bloc

like :

<form action="#">
 <div class = "css">


 <label for="city">City</label>
  <input type="text" id="city"/>
   </div><div class="css">
  <label for="street">Street</label>
  <input type="text" id="street"/>
   </div>
</form>

and in the CSS:

.css{
    display : inline-block;
}

Solution 2

Another solution is putting a div around each label/input combination and setting the css to float left HTML

<form action="#">
    <div>
        <label for="city">City</label>
        <input type="text" id="city"/>
    </div>
    <div>
        <label for="street">Street</label>
        <input type="text" id="street"/>
    </div>
</form>

CSS

form div{
   float: left
}

jsFiddle

Solution 3

If you use Bootstrap you need to use the css of bootstrap ! Use class="form-horizontal" or class="form-inline"

You can try this with no css added :

<form action="#" class="form-horizontal">
        <label for="city">City</label>
        <input type="text" id="city"/>
        <label for="street">Street</label>
        <input type="text" id="street"/>
</form>

Simple no ?