单选按钮和标签在同一行中对齐

Question

如何使单选按钮的单选按钮和标签在同一行中对齐。 我给margin和padding的跨度标签，但它的MOT移动 什么它

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