如何將單選按鈕和標籤對齊在一行中？

在單行中對齊標籤和單選按鈕

建立表單時，保持表單元素的內聚佈局至關重要。然而，並排對齊單選按鈕及其相應的標籤可能會帶來挑戰。在這裡，我們解決了此問題的原因，並提供了解決方案。

在提供的 HTML 程式碼中，標籤和單選按鈕未正確對齊，因為這些元素的預設顯示屬性設定為區塊級別，導致它們垂直堆疊。

為了解決這個問題，我們可以利用浮動屬性。透過將標籤和單選按鈕設為向左浮動，我們可以強制它們彼此相鄰顯示：

fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

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

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

此外，我們可以使用類別為「some-class」的容器div 對單選按鈕和標籤，如以下HTML 程式碼所示：

<fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y" />
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z" />
    <label for="z">Thing 2</label>
  </div>
</fieldset>

透過實作這些更改，標籤和單選按鈕將水平對齊在一行上，解決了對齊問題。

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