Html 양식 레이블 줄 바꿈

Question

같은 줄에 입력 텍스트 상자가있는 트위터 부트 스트랩 양식이 필요하지만 레이블은 입력란의 맨 위에 있어야합니다.

지금까지 내가 가지고 :

<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

은 각 레이블과 블록 주위에 사업부를두고, 수 인라인 블록

등이 사업부를 넣어 CSS에서 :

<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를 왼쪽으로 떠올리게 설정하는 것입니다.

<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

부트 스트랩을 사용하는 경우 부트 스트랩의 CSS를 사용해야합니다! 사용 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> 

간단한?