css - 如何停止:before element to push label text to the right

Question

在我的元素中，我们需要设置复选框元素的样式。我已经看到一种常见的方法是设置相关标签的 :before 元素的样式。

到目前为止，我已经设法实现了其中的大部分内容，但是我遇到了 :before 元素将标签文本的第一行推到右侧的问题。

我试图将标签中的所有文本对齐到 :before 元素的右侧，但到目前为止，第二行总是从与 :before< 相同的位置开始 元素。

我不是前端开发人员，但我尝试过更改 padding、margin、left、position 等。但我不知所措。

它是这样的:

我希望标签的所有文本都从红线开始。

您可以在 this Fiddle 中看到我目前拥有的内容.

.container-box{
  display:block;
  max-width:200px;
}
.neat-checkbox {
  display: inline;
  width:40px;
}
.neat-checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  font-size: 10px !important;
  display: none;
}
.neat-checkbox label {
  margin-left: 0px;
  margin-top: 2px;
  line-height: 17px !important;
}
.neat-checkbox label:before {
  font-family: "FontAwesome";
  content: "\f00c";
  color: white;
  position: relative;
  left: -5px;
  top: 0px;
  outline: none;
  cursor: pointer;
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  box-sizing: border-box;
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}
.neat-checkbox input[type=checkbox]:checked + label:before {
  background-color: #2bb19e;
  border-color: #2bb19e;
  color: #fff;
  font-family: "FontAwesome";
  content: "\f00c";
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}
.neat-checkbox input[type="checkbox"]:focus + label::before {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="neat-checkbox">
  <input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
  <label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>
</div>

Answer 1

给标签一些左填充并将 :before 元素绝对定位在其中。例如:

.container-box {
  display: block;
  max-width: 200px;
}

.neat-checkbox {
  display: inline;
  width: 40px;
}

.neat-checkbox input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 0;
  cursor: pointer;
  opacity: 0;
  z-index: 1;
  font-size: 10px !important;
  display: none;
}

.neat-checkbox label {
  margin-left: 0px;
  margin-top: 2px;
  line-height: 17px !important;
  display: inline-block; /* make it block-level */
  position: relative; /* so that child elements can be positioned relative to it */
  padding-left: 25px; /* allow some space for the pseudo checkbox */
}

.neat-checkbox label:before {
  font-family: "FontAwesome";
  content: "\f00c";
  color: white;
  left: 0px;
  top: 0px;
  outline: none;
  cursor: pointer;
  display: block; /* make it block-level */
  position: absolute; /* give an absolute position (defaults to 0,0) */
  width: 17px;
  height: 17px;
  border: 1px solid #ced4da;
  border-radius: 3px;
  background-color: #fff;
  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  box-sizing: border-box;
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}

.neat-checkbox input[type=checkbox]:checked+label:before {
  background-color: #2bb19e;
  border-color: #2bb19e;
  color: #fff;
  font-family: "FontAwesome";
  content: "\f00c";
  font-size: 11px;
  padding-left: 2px;
  line-height: 17px;
}

.neat-checkbox input[type="checkbox"]:focus+label::before {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

<div class="container-box">
  <div>
    <label>Some other stuff</label>
  </div>
  <div class="neat-checkbox">
    <input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
    <label for="checkboxId_25600">Label For Checkbox MOre more more</label>
  </div>
</div>