我正试图以网格格式从复选框中创建一个检查表，但是我遇到了麻烦，这是唯一带有标签的复选框的顶部行，与其余部分对齐。看起来上面的复选框是根据它们的标签长度分开的，所以我想我只需要找到导致这种情况的代码部分并删除它，但我似乎找不到它。有人能帮帮我吗?代码如下:
<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 class="checkboxes">
<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>
试试这个，不使用flexx来获得一致的行为，
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 class="checkboxes">
<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>