html - 与复选框重叠的标签

Question

我曾尝试将填充边距放在机器人输入元素和标签的左侧，但都没有帮助。你能帮我正确对齐标签吗？谢谢!

<div class="row">
        <div class="col-xs-12">
            <div class="input-checkbox">
                <input id="activateSocialMediaTrial" name="activateSocialMediaTrial" asp-for="ActivateSocialMediaTrial" type="checkbox" style="padding: 15px; margin:15px" />
                <label for="activateSocialMediaTrial" style="white-space: nowrap">Sign me up for a <b>free 30 days trial of social media management</b></label>
            </div>
        </div>
    </div>

.input-checkbox label {
  background: none;
  border: 1px solid #d3d3d3;
  text-align: center;
  position: relative;
}

Answer 1

您已将 input 的边距设置为 margin:15px，这导致它从其预期位置移动，如 Bootstrap input:checkbox 有 margin:-1.25em 所以你要将它从它的位置移开。