Estoy tratando de hacer una lista de verificación con casillas de verificación en un formato similar a una cuadrícula, pero tengo problemas para alinear la fila superior de casillas de verificación, que son las únicas que tienen etiquetas, con el resto. Parece que las casillas de verificación en la parte superior están separadas según la longitud de la etiqueta, por lo que creo que solo necesito encontrar la parte del código que causa eso y eliminarlo, pero parece que no puedo encontrarlo. ¿Alguien me puede ayudar? El código está abajo.
<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>Pruebe esto, no use flexbox para obtener un comportamiento consistente,
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>