Html form label line breaks

Question

Мне нужна форма ботстрапа twitter с текстовыми полями ввода на одной строке, но ее метки должны быть в верхней части полей ввода.

До сих пор у меня есть:

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

Поэтому мне нужно входы на той же линии и этикетки должны быть в верхней части каждого входа.

Как это сделать?

Answer 1

вы можете поместить DIV вокруг каждой метки и блока, и в CSS поставить этот DIV в инлайн-блоке

как:

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

и в CSS:

.css{ 
    display : inline-block; 
} 

Answer 2

Другим решением является установка div вокруг каждой комбинации меток/ввода и установка css для поплавка влево 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

Answer 3

Вы также можете просто использовать <br />. Он будет работать и для формы.

Answer 4

Если вы используете Bootstrap, вам нужно использовать css bootstrap! Использование class="form-horizontal" or class="form-inline"

Вы можете попробовать это, без CSS добавил:

<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 нет?