如何正确对齐复选框？

Question

我是 html 新手，如何将复选框与文本正确对齐？ 这将是我英语不好的预期输出是

预期输出

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div style=" margin-top: 15px;">
  <form action="#" method="post" autocomplete="off">
    <div style=" margin-left: 15px;">
      <label class="checkbox-inline"><input type="checkbox" value="Monday"> Monday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Tuesday"> Tuesday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Wedndesday"> Wedndesday </label> <br>
      <label class="checkbox-inline"><input type="checkbox" value="Thursday"> Thursday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Friday"> Friday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Saturday"> Saturday </label>
    </div>
  </form>
</div>

Answer 1

使用 CSS 网格：

form div {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  grid-gap:5px 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<form action="#" method="post" autocomplete="off">
  <div style=" margin-left: 15px;">
    <label class="checkbox-inline"><input type="checkbox" value="Monday"> Monday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Tuesday"> Tuesday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Wedndesday"> Wedndesday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Thursday"> Thursday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Friday"> Friday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Saturday"> Saturday </label>
  </div>