라디오 버튼과 레이블이 같은 줄에 정렬

Question

라디오 버튼과 라디오 버튼의 레이블을 같은 줄에 정렬하는 방법. 난 스팬 태그에 마진과 패딩을하는 듯했으나 그 경구는 이동 무슨 일이

<form class="navbar-form pull-right" style=""> 
    <input type="radio" name="sex" value="male"><span>All</span> 
    <input type="radio" name="sex" value="female"><span>Name<span> 
    <input type="radio" name="sex" value="male"><span>Vendor No.<span> 
    <input type="radio" name="sex" value="female"><span>Contact<span> 
    <input type="radio" name="sex" value="male">Address<span> 
    <input type="radio" name="sex" value="female">Phone 
    <input class="span2" type="password"> 
    <input name="Finish" value="Search" class="checkout-button searchButton" type="submit" style="width: 107px;padding-left: 0px;padding-right: 0px;"> 
</form> 

Answer 1

당신은 실제 라벨을 사용하여 시도해 볼 수도 있습니다 ...이 설정으로 http://jsfiddle.net/uBUhw/

<form class="navbar-form pull-right"> 
    <label><input type="radio" name="sex" value="male" /> All</label> 
    <label><input type="radio" name="sex" value="female" /> Name</label> 
    <label><input type="radio" name="sex" value="male" /> Vendor No.</label> 
    <label><input type="radio" name="sex" value="female" /> Contact</label> 
    <label><input type="radio" name="sex" value="male" /> Address</label> 
    <label><input type="radio" name="sex" value="female" /> Phone</label> 
    <input class="span2" type="password" /> 
    <input name="Finish" value="Search" class="checkout-button searchButton" 
    type="submit" /> 
</form> 

, 라디오위한 솔루션 버튼은 모두 인라인입니다. 당신이 한 줄에 각 라디오 버튼을 원하는 경우에 당신은이 작업을 수행 할 수 있습니다

.navbar-form label{ 
    display:block; 
}