html - 单选按钮未水平排列

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 而不是仅仅覆盖它。