javascript - 复选框垂直对齐错误 : label is down and the check box is up

Question

复选框和标签未在同一行上对齐。

我尝试设置 vertical align : middle, display : inline-block, 但它根本不起作用。

ruleHtmlBody += '<div class="xx-checkbox checkbox-primary" style="padding-left: 10px;display:inline-block;">' +

    '<input class="xx-config-rules col-md-1" ruleid = "' + rulesList[i].Id + '" id="' + id + '" type="checkbox"' + ischeckedString + '/>' +

    '<label class="col-md-11" for="' + id + '">' + rulesList[i].Name +

    '<a id="' + idHelp + '" type="button" class="helptooltip gh" data-trigger="hover" data-toggle="popover" data-content="' + rulesList[i].Description + '"></a></label>' +
'</div>';

输出:

[] 
   lable1
[]
   lable2

预期输出是:

[] lable1
[] lable2

Answer 1

使用此代码解决您的问题。

.xx-checkbox{
  display:flex;
  align-items:center;
}