Question

如何使单选按钮和单选按钮的标签对齐在同一行。我给了span标签边距和填充但它的动作正在移动什么是解决方案

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

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

1 个答案: