复选框对齐表替代项

Question

我有 5 个复选框和一个有 6 行（1 个头，5 个主体）的表格，该表格代表问题的选择。如何将每个复选框与每行的第一行对齐？

table,
thead,
td {
  border: 1px solid black;
  padding: 3px;
}

thead {
  font-weight: bold !important;
}

table {
  margin: 5px;
  margin-bottom: 1rem;
}

.form-check {
  margin-left: -20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<p style="margin-left: 20px;">
<form id='f1'>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div>
  <br>
  <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
</form>
<table>
  <thead>
    <tr>
      <td> </td>
      <td>Event 1</td>
      <td>Event 2</td>
      <td>Event 3</td>
      <td>Event 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a)</td>
      <td>29</td>
      <td>29</td>
      <td>30</td>
      <td>30</td>
    </tr>
    <tr>
      <td>b)</td>
      <td>29</td>
      <td>30</td>
      <td>30</td>
      <td>31</td>
    </tr>
    <tr>
      <td>c)</td>
      <td>30</td>
      <td>30</td>
      <td>31</td>
      <td>31</td>
    </tr>
    <tr>
      <td>d)</td>
      <td>30</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
    </tr>
    <tr>
      <td>e)</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
      <td>31</td>
    </tr>
  </tbody>
</table>
</p>

我不擅长 CSS，我试图弄乱开发人员工具，但结果是： Image。看起来表格已经在表格旁边，这很好，但它只有在表格完成后才开始，也许是因为我放了 br 但没有它们，每个复选框都会在其他复选框的顶部。我想将复选框放在单元格内，但样式会被破坏。

Answer 1

缺少 flex。给你...

.wrap_my_face {
  display: flex;
  flex-direction: row;
}
table,
thead,
td {
  border: 1px solid black;
}
thead {
  font-weight: bold !important;
}
table {
  margin: 5px;
  margin-bottom: 1rem;
}
form {
  margin-top: 2.2875rem;
}
.form-check {
  margin: -.4125rem 0;
}

<div style="margin-left: 20px;">
  <div class="wrap_my_face">
    <form id='f1'>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='A'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='B'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='C'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='D'></div><br>
      <div class='form-check'><input type='checkbox' class='form-check-input' name='E'></div>
    </form>
    <table>
      <thead>
        <tr>
          <td> </td>
          <td>Event 1</td>
          <td>Event 2</td>
          <td>Event 3</td>
          <td>Event 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a)</td>
          <td>29</td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
        </tr>
        <tr>
          <td>b)</td>
          <td>29</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
        </tr>
        <tr>
          <td>c)</td>
          <td>30</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
          <td>d)</td>
          <td>30</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
        <tr>
          <td>e)</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
          <td>31</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>