CSS是網頁開發中不可或缺的一部分，尤其是頁面布局與樣式方面。本篇文章將簡要介紹如何實現單選按鈕的橫向排列，讓頁面更加美觀。

<style>
/* 設置單選按鈕樣式 */
input[type=radio] {
display: none; /* 隱藏原有單選按鈕 */
}
.radio-container {
position: relative;
display: inline-block;
height: 20px;
padding-left: 30px;
margin-bottom: 10px;
cursor: pointer;
font-size: 16px;
user-select: none;
}
/* 添加偽元素樣式 */
.radio-container::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
background-color: #fff;
}
/* 選中時樣式 */
input[type=radio]:checked + .radio-container::before {
border-color: #2196F3; /* 修改邊框顏色 */
background-color: #2196F3; /* 修改背景顏色 */
}
</style>

通過上述CSS樣式代碼，我們可以實現單選按鈕的橫向排列，代碼解釋如下：

首先，我們隱藏了原有的單選按鈕，并設置一個容器用于存放單選按鈕。然后，設置容器的屬性，包括位置、大小、填充等。接著，為容器添加偽元素`::before`，設置其樣式，包括邊框、外觀等。最后，添加一個選中樣式，當單選按鈕被選中時，我們設置了邊框顏色與背景色。

以上就是如何實現單選按鈕橫向排列的簡要介紹。相信掌握了這個技巧，您將能夠更好地美化您的網頁。