Question

我的HTML单选按钮垂直排列而不是水平排列。此外，他们每个人的文字都不像我希望的那样在按钮旁边。

<fieldset>
    <legend>Payment Method</legend>
    <input type="radio" name="payment_type" value="bill"/>
    <label for="bill">Bill Me</label>
    <input type="radio" name="payment_type" value="credit" checked/>
    <label for="credit">Credit Card</label>
    <input type="radio" name="payment_type" value="paypal"/>
    <label for="paypal">Paypal</label>  
</fieldset>

这是我的HTML按钮的代码。我有一个外部样式表，但截至目前我还没有为按钮实现任何样式。

Answer 1

默认情况下，复选框水平对齐，标签也是如此。您必须在元素上设置display:block。删除它，或通过应用display:inline-block覆盖它。

尝试以下CSS：

input[type="radio"] {
    display:inline-block;
}

label {
    display:inline-block;
}

正如我所说，这些是默认属性。您应该收到以下结果。 jsFiddle here最好只删除display:block，而不是仅覆盖它。

单选按钮没有水平排列

1 个答案: