2

我的 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 按钮的代码。我有一个外部样式表，但到目前为止我还没有为按钮实现任何样式。

4

1 回答 1

7

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

试试下面的 CSS：

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

label {
    display:inline-block;
}

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

于 2013-10-10T00:16:49.490 回答