Question

所以我有一个小问题，我似乎无法弄清楚该怎么做。我有一个复选框和一个标签。我想将标签降低几个像素，而不是触摸复选框。

如何使用此代码结构实现此目的 - 这是Fiddle？

这是代码：

<div class="form-check">
   <span class="custom-checkbox-container mr-2">
     <input type="checkbox" id="first_checkbox">
     <label for="first_checkbox">Checkbox</label>
   </span>
</div> 

.form-check {      
  margin-bottom: 0;
  margin-top: 3px;
.custom-checkbox-container {
  input[type="checkbox"] {
    display: none;
    & + label {
      position: relative;
      font-family: 'Open Sans', sans-serif;
      letter-spacing: 0.5px;
      font-size: 10px;
      color: #292a2c;
      text-transform: uppercase;
      font-weight: 700;
    }
    & + label:before {
      content: " ";
      box-sizing: border-box;
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      border: 2px solid #787878;
    }
    & + label:after {
      content: " ";
      opacity: 0;
      position: absolute;
      width: 12px;
      height: 7px;
      top: 4px;
      left: 4px;
      background: transparent;
      border: 2px solid #787878;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      transition: opacity .3s;
    }
    &:checked + label:after {
      opacity: 1;
    }
  }
  }
}

谢谢！

Answer 1

您可以尝试在标签

中添加额外的span

<label for="first_checkbox">
   <span>Checkbox</span>
</label>

和CSS

label>span {
  position: relative;
  bottom: -2px;
}

Answer 2

您可以完全定位复选框，然后在padding-top https://jsfiddle.net/9gr4pv69/4/上使用label

复选框和标签对齐

2 个答案: