复选框对齐无法正常工作

Question

我在thymeleaf HTML模板中定义的字段很少，是复选框，它们的代码如下。复选框的值从springboot控制器返回

<table>
<tr>
                <td>
                    Applicable on&nbsp;&nbsp;
                                <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
                </td>              
            </tr>
            <tr>
                <td>
                    Filter Level&nbsp;&nbsp;
                                    <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
                </td>              
            </tr>
</table>

这是带有上面代码的HTML文件的屏幕截图

现在，我试图水平对齐复选框，但我无法做到这一点。这是HTML中使用的CSS文件

<link rel="stylesheet" type="text/css" href="/css/util.css" th:href="@{/css/util.css}">
    <link rel="stylesheet" type="text/css" href="/css/main.css" th:href="@{/css/main.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel = "stylesheet" href = "/css/tags.css" th:href="@{/css/tags.css}">

由于任何CSS文件，我不确定是否与冲突有关。有人可以帮我解决这个问题吗？

Answer 1

您需要将vertical-align: middle;添加到span和input中，如下所示：

span {
  vertical-align: middle;
}

input {
  margin: 0;
  vertical-align: middle;
}

<table>
  <tr>
    <td>
      Applicable on&nbsp;&nbsp;
      <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
    </td>
  </tr>
  <tr>
    <td>
      Filter Level&nbsp;&nbsp;
      <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
    </td>
  </tr>
</table>

Answer 2

只需尝试一下：

input, label, td, span {
  display: flex;
  align-items: center;
}

<table>
<tr>
                <td>
                    Applicable on&nbsp;&nbsp;
                                <span th:each="checkboxvalue : ${appOnValues}">
                                    <input type = "checkbox" th:field = "*{channel}" th:value = "${checkboxvalue}" />
                                    <label th:for = "${#ids.prev('channel')}" th:text = "${checkboxvalue}">
                                    </label>&nbsp;&nbsp;
                                </span>
                </td>              
            </tr>
            <tr>
                <td>
                    Filter Level&nbsp;&nbsp;
                                    <span th:each="radiovalue : ${filterLevelValues}">
                                        <input type = "radio" th:field = "*{filterLevel}" th:value = "${radiovalue}" />
                                        <label th:for = "${#ids.prev('filterLevel')}" th:text = "${radiovalue}">
                                        </label>
                                    </span>
                </td>              
            </tr>
</table>