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

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