CSS單選框是一種常見的界面元素，用于讓用戶在幾個選項中選擇一個。一旦用戶選擇了一個選項，所有其他選項就會自動被取消。本文將介紹如何使用CSS將單選框橫著排列。

<form>
<div class="radioGroup">
<input type="radio" id="option1" name="option" value="option1">
<label for="option1">Option 1</label>
</div>
<div class="radioGroup">
<input type="radio" id="option2" name="option" value="option2">
<label for="option2">Option 2</label>
</div>
<div class="radioGroup">
<input type="radio" id="option3" name="option" value="option3">
<label for="option3">Option 3</label>
</div>
</form>

要橫著排列單選框，我們需要使用CSS的flexbox布局。首先，我們需要將輪廓線（outline）和默認的樣式（appearance）都取消：

<style>
.radioGroup {
display: flex;
margin-right: 20px;
}
.radioGroup input[type="radio"] {
outline: none;
appearance: none;
margin-right: 10px;
}
</style>

現(xiàn)在，我們需要將每個單選框包含在一個div元素中，并將這些div元素設(shè)置為flex容器。我們還添加了一些樣式，以在每個單選框之間添加一些間距：

<style>
.radioGroup {
display: flex;
margin-right: 20px;
}
.radioGroup input[type="radio"] {
outline: none;
appearance: none;
margin-right: 10px;
}
</style>

現(xiàn)在，我們已經(jīng)成功地將單選框橫著排列了。我們還可以根據(jù)需要繼續(xù)添加樣式來定制單選框的外觀。