CSS 單選按鈕組可以讓用戶在一組選項中進行選擇。本文將介紹如何創建一個橫向的單選按鈕組。

<div class="radio-group">
<input type="radio" id="option1" name="radio-group">
<label for="option1">選項 1</label>
<input type="radio" id="option2" name="radio-group">
<label for="option2">選項 2</label>
<input type="radio" id="option3" name="radio-group">
<label for="option3">選項 3</label>
<input type="radio" id="option4" name="radio-group">
<label for="option4">選項 4</label>
</div>

我們創建了一個 DIV 容器，并在容器中添加了四個單選按鈕。注意，name 屬性必須設置為相同的值，這樣它們才能成為同一組。每個單選按鈕都與一個標簽相關聯。當標簽被點擊時，相關的單選按鈕會被選中。

接下來，我們使用 CSS 樣式來將單選按鈕組橫向顯示。

.radio-group {
display: inline-block;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
}

我們將 DIV 容器的 display 屬性設置為 inline-block，這樣它會在同一行中顯示。label 元素的 display 屬性也設置為 inline-block，這樣它們就會水平排列。我們還添加了 margin-right 屬性，以使標簽之間有一些間隔。

這樣，我們就創建了一個漂亮的橫向單選按鈕組。