html - 复选框对齐未按预期工作

Question

我的 thymeleaf HTML 模板中定义了几个字段，它们是复选框，它们的代码如下所示。复选框的值从 springboot Controller 返回

<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

需要在span和input中添加vertical-align: middle;，如下图:

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>