<div> 單選按鈕是一種常用的網頁元素，可以用來讓用戶從一組選項中選擇一個。它通常由一個圓形符號和與之關聯的文本組成。當用戶點擊某個單選按鈕時，它將被選中，并取消其他單選按鈕的選中狀態。在本文中，我們將通過幾個代碼案例來詳細解釋如何使用<div> 單選按鈕。
，我們來看一個基本的<div> 單選按鈕的例子：

<p><div></p>
<p>  <input type="radio" name="gender" value="male"> Male<br></p>
<p>  <input type="radio" name="gender" value="female"> Female<br></p>
<p></div></p>

在這個例子中，我們使用了一個<div>元素來包裹兩個單選按鈕。每個單選按鈕都被放置在一個<input>元素中，其中type屬性設置為"radio"，name屬性設置為"gender"表示它們屬于同一組，value屬性用來設置選項的值，文本內容則放在<input>元素后面。
接下來，讓我們看一下如何使用CSS樣式來美化這些<div>單選按鈕：

<p><style></p>
<p>  .radio-button {</p>
<p>    margin-bottom: 10px;</p>
<p>  }</p>
<p>  .radio-button input[type="radio"] {</p>
<p>    display: none;</p>
<p>  }</p>
<p>  .radio-button label {</p>
<p>    display: inline-block;</p>
<p>    padding: 6px 12px;</p>
<p>    background-color: #f2f2f2;</p>
<p>    border: 1px solid #ccc;</p>
<p>    border-radius: 4px;</p>
<p>  }</p>
<p>  .radio-button label:hover {</p>
<p>    background-color: #e6e6e6;</p>
<p>  }</p>
<p>  .radio-button input[type="radio"]:checked + label {</p>
<p>    background-color: #3366ff;</p>
<p>    color: white;</p>
<p>  }</p>
<p></style></p>

在這個例子中，我們使用了一個名為"radio-button"的CSS類來對<div>元素和其內部的<input>和<label>元素進行樣式設置。其中，margin-bottom屬性用于設置底邊距，display: none;用來隱藏<input>元素，label元素通過設置padding、background-color、border和border-radius屬性來設置圓形的外觀。
最后，我們將以上兩個例子結合起來，形成一個具有樣式的<div>單選按鈕組：

<p><div class="radio-button"></p>
<p>  <input type="radio" name="gender" value="male"> <label>Male</label><br></p>
<p>  <input type="radio" name="gender" value="female"> <label>Female</label><br></p>
<p>  <input type="radio" name="gender" value="other"> <label>Other</label><br></p>
<p></div></p>

現在，每個單選按鈕都具有圓形的外觀，并且選中狀態下背景顏色為藍色，非選中狀態下為灰色。
一下，<div>單選按鈕是網頁開發中常用的元素，可以通過HTML和CSS來實現樣式和功能的設置。通過包裹<input>和<label>元素，可以創建出漂亮的單選按鈕組，并通過設置name屬性來確保它們屬于同一組，實現單選的功能。通過設置CSS樣式，我們可以對<div>單選按鈕進行各種樣式的修改，以滿足不同的設計需求。希望本文對你理解和使用<div>單選按鈕有所幫助！