如何将复选框和单选框整齐地对齐？

要将复选框（checkbox）和单选框（radio button）整齐地对齐，可以采用以下几种方法：

1. 使用CSS Flexbox布局

Flexbox是一种现代的布局方式，它可以很容易地让元素在容器中水平和垂直对齐。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Checkboxes and Radio Buttons</title>
<style>
  .form-container {
    display: flex;
    flex-direction: column;
  }
  .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .form-group label {
    margin-right: 10px;
  }
</style>
</head>
<body>
<div class="form-container">
  <div class="form-group">
    <input type="checkbox" id="checkbox1" name="checkbox1">
    <label for="checkbox1">Checkbox 1</label>
  </div>
  <div class="form-group">
    <input type="checkbox" id="checkbox2" name="checkbox2">
    <label for="checkbox2">Checkbox 2</label>
  </div>
  <div class="form-group">
    <input type="radio" id="radio1" name="radioGroup" value="option1">
    <label for="radio1">Radio 1</label>
  </div>
  <div class="form-group">
    <input type="radio" id="radio2" name="radioGroup" value="option2">
    <label for="radio2">Radio 2</label>
  </div>
</div>
</body>
</html>

2. 使用CSS Grid布局

CSS Grid是另一种强大的布局系统，它允许你在二维空间内创建复杂的布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Checkboxes and Radio Buttons</title>
<style>
  .form-container {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
  }
  .form-container label {
    margin-right: 10px;
  }
</style>
</head>
<body>
<div class="form-container">
  <div>
    <input type="checkbox" id="checkbox1" name="checkbox1">
    <label for="checkbox1">Checkbox 1</label>
  </div>
  <div>
    <input type="checkbox" id="checkbox2" name="checkbox2">
    <label for="checkbox2">Checkbox 2</label>
  </div>
  <div>
    <input type="radio" id="radio1" name="radioGroup" value="option1">
    <label for="radio1">Radio 1</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioGroup" value="option2">
    <label for="radio2">Radio 2</label>
  </div>
</div>
</body>
</html>

3. 使用HTML表格

虽然不推荐在表单设计中使用表格，但在某些情况下，它可以作为一种快速对齐元素的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Checkboxes and Radio Buttons</title>
<style>
  table {
    border-collapse: collapse;
  }
  td {
    padding: 5px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td><input type="checkbox" id="checkbox1" name="checkbox1"><label for="checkbox1">Checkbox 1</label></td>
    <td><input type="checkbox" id="checkbox2" name="checkbox2"><label for="checkbox2">Checkbox 2</label></td>
  </tr>
  <tr>
    <td><input type="radio" id="radio1" name="radioGroup" value="option1"><label for="radio1">Radio 1</label></td>
    <td><input type="radio" id="radio2" name="radioGroup" value="option2"><label for="radio2">Radio 2</label></td>
  </tr>
</table>
</body>
</html>