如何在表單中水平對齊單選按鈕和標籤？

單選按鈕和標籤水平對齊

建立表單時，標籤和單選按鈕出現在不同的行上可能會令人沮喪。要解決此問題並保持它們水平對齊：

解決方案：

將標籤和單選按鈕浮動到左側，並根據需要調整內邊距和邊距。此外，為舊版 Internet Explorer 的單選按鈕指定一個類別名稱。要為所有按鈕實現相同的內聯對齊，請使用以下HTML 結構：

<code class="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></code>

<code class="css">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;
}</code>

透過遵循這些準則，您可以確保標籤和單選按鈕出現在同一行，從而為用戶提供無縫的體驗填寫表格的經驗。

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