如何在同一行顯示單選按鈕和標籤？

單選按鈕和標籤的同儕顯示

建立表單時，可能需要有單選按鈕及其對應的標籤顯示在同一行。但是，預設情況下，單選按鈕顯示在其標籤下方。

嘗試對齊單選按鈕和標籤時遇到以下問題：

<form>
    <label>First Item</label>
    <input type="radio">
    
    <label>Second Item</label>
    <input type="radio">
    
    <input type="submit">
</form>

在這種情況下，單選按鈕顯示在其下方標籤。為了解決這個問題，實施了以下解決方案：

將標籤和輸入元素浮動到左側並調整填充和邊距，直到實現對齊。

此外，為了獲得最佳相容性，請新增一個類別舊版 Internet Explorer 的單選按鈕的名稱。

對於同一行上有多個單選按鈕的表單，建議的標記為：

<fieldset>
    <div class="some-class">
        <input type="radio" class="radio" name="..." value="...">
        <label for="...">...</label>
    </div>
</fieldset>

使用以下CSS：

fieldset {
    overflow: hidden;
}

.some-class {
    float: left;
}

label {
    float: left;
    display: block;
    padding: 0 1em 0 8px;
}

input[type=radio] {
    float: left;
    margin: 2px 0 0 2px;
}

透過實作這些技術，可以實現單選按鈕和標籤的同儕顯示。

以上是如何在同一行顯示單選按鈕和標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！