水平排列的單選按鈕

我的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按鈕的代碼。我有一個外部樣式表，但到目前爲止，我還沒有爲按鈕實現任何樣式。

來源

2013-10-10 RedGaiter

您使用的是什麼CSS？沒有CSS就沒問題。http://jsfiddle.net/KvPCp/刪除某些格式，或者將「display：inline-block」應用於複選框。 –

我還沒有爲這些單選按鈕實現任何CSS。我希望它們水平排列，但對我來說，它們是垂直排列的 – RedGaiter

必須有一些CSS，因爲它們在示例中是水平對齊的（默認）..您能提供一個示例嗎？ –

默認情況下，複選框水平對齊，標籤也一樣。您必須在元素上設置display:block。刪除它，或者通過應用display:inline-block來覆蓋它。

試試下面的CSS：

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

label { 
    display:inline-block; 
}

正如我所說的，這些都是默認屬性。您應該會收到以下結果。 jsFiddle here最好只是刪除display:block而不是僅僅覆蓋它。

來源

2013-10-10 00:16:49

水平排列的單選按鈕

回答

相關問題