复选框对齐未按预期工作答案

【问题标题】：Check boxes alignment not working as expected复选框对齐未按预期工作
【发布时间】：2019-09-24 18:29:47
【问题描述】：

我的 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 文件的冲突有关。有人可以帮我解决这个问题吗？

【问题讨论】：

你能设置所有代码和 css 的小提琴

标签： html css spring-boot thymeleaf checkboxlist

【解决方案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>

【讨论】：

对齐问题已修复，但存在错位
删除边距：0；并检查
我的一些对齐方式也受到了影响。我的意思是边界线
让我们continue this discussion in chat。

【解决方案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>

【讨论】：