html - 如何在 prestashop 上对齐复选框和标签

Question

您好，我正在开发 prestashop 模块，我想在 smarty 模板中将复选框与标签对齐。

例如，我试试这个:

<input id="Checkbox1" name="Checkbox1" type="checkbox" value="Admin" />
<label for="Checkbox1">test</label>

但是在我的导航器上，标签位于复选框下方，并且在 HTML 源代码中，我在我的 checkbox 周围看到了一个 div。

<div class="checker" id="uniform-Checkbox1"><span><input id="Checkbox1" name="Checkbox1" value="Admin" type="checkbox"></span></div>
<label for="Checkbox1">test</label>

此代码在经典 HTML 页面中完美运行。感谢帮助。我在 docker 环境中使用 Prestashop 1.6.1.4。

Answer 1

将以下 CSS 粘贴到您的自定义 CSS 文件中:

.checker,
.checker+label {
  display: inline-block;
  vertical-align: middle;
}

.checker,
.checker+label {
  display: inline-block;
  vertical-align: middle;
}

<div class="checker" id="uniform-Checkbox1"><span><input id="Checkbox1" name="Checkbox1" value="Admin" type="checkbox"></span></div>
<label for="Checkbox1">test</label>