如何停止：在元素之前将标签文本向右推送

Question

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

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

我正在尝试将标签中的所有文本对齐:before元素的右边，但是到目前为止，第二行总是比:before元素在同一位置开始。

我不是前端开发人员，但是我曾尝试过更改填充，边距，左边，位置等。但是我很茫然。

外观如下：

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

您可以在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元素完全放置在标签内。 EG：

(block)

.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);
}

Answer 2

问题是，您正在使用相对位置移动复选框，因此保留了原始空间，但是您只将视觉对象向左移动了5px。

如果您使用margin-right: -5px，则可以添加left: -5px，也可以删除left属性，而只需使用margin-left: -5px。