How can I get These Rows of checkboxes to line up?-CodePudding

I am trying to make a checklist out of checkboxes in a grid-like format, but am having trouble getting the top row of checkboxes, which are the only ones with labels, to line up with the rest. It looks like the checkboxes up top are spaced apart based on their label length, so I think I just need to find the portion of the code that causes that and remove it, but I cannot seem to find it. Can someone help me? The code is down below.

    <head>
<style>
.checkboxes input{
  margin: 10px 20px 10px 20px;
}
ul{
      display: flex;
      align-items: flex-start;
      justify-content: center;
      margin:0px; padding:0px;
    }
    ul li{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap:wrap;
    }
    ul li label{ text-align:center; display:block; width:100%;}

</style>

<center>
</head>

<body>
<br><br><br>
<ul>
  <li>
  <label>Inspect</label><input type="checkbox">
  </li>
  <li>
 <label>Repair</label><input type="checkbox">
  </li>
  <li>
  <label>New Part</label><input type="checkbox">
  </li>
  <li>
  <label>Unit Exch</label><input type="checkbox">
  </li>
  
  </ul>

<div >


<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<br>

</body>

CodePudding user response：

Try this, not using flexbox to get consistent behaviour,

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 18.5px; /* Height of Lable */
}

ul li {
  display: inline;
  position: relative;
}

ul li label {  
  position: absolute;
  left: 50%;
  transform: translate( -50%, -100% );
  white-space: nowrap;
}

ul li input,
.checkboxes input {
  margin: 10px 30px 10px 30px;
}

<ul>
  <li>
    <label>Inspect</label><input type="checkbox">
  </li>
  <li>
    <label>Repair</label><input type="checkbox">
  </li>
  <li>
    <label>New Part</label><input type="checkbox">
  </li>
  <li>
    <label>Unit Exch</label><input type="checkbox">
  </li>

</ul>

<div >


  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>

  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <br>