为什么我的复选框无法正确对齐？百里香叶

Question

我正在使用 ThymeLeaf 。

我想将复选框与标有口味名称的对齐（对不起，它是西班牙语，但您在图片中看到的文字是冰淇淋口味）。

您可以在图片中看到该复选框显示为隐藏状态吗？我什至无法点击它们。为什么会这样呢？

有人可以帮我解释一下我在做什么错吗??

这是我的代码：

  h6{
    text-align:center;
}

.tabla{
  width: 100%;
  border: 1px solid black;
}
.tablaInput{
  border: 1px solid black;
  float: right;
}

.single-checkbox{
margin-right: 50px;
}

<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <form action="" name="vasitoForm">
            <table class="tabla">
                    <tr th:each="gusto : ${gustos}">
                        <td th:text="${gusto.nombre}"></td>
                        <td><input class="single-checkbox" type="checkbox"/></td>
                    </tr>
            </table>
            <button type="submit">Enviar Pedido</button>
        </form>
    </div>
</div>iv>
</div>

Answer 1

对于阅读本文的任何人，我已经解决了在CSS中添加以下行的问题：

[type="checkbox"]:not(:checked), [type="checkbox"]:checked{
  position: inherit !important;
  left: 50 !important;
  visibility: inherit !important;
}

我不知道为什么，但是默认情况下复选框显示为隐藏，这很奇怪！