Css 如何停止：在元素之前将标签文本推到右侧

在我的项目中，我们需要设置checkbox元素的样式。我已经看到了一种常见的方法是将关联标签的

：before

元素改为样式

到目前为止，我已经成功地实现了其中的大部分，但是我遇到了一个问题，那就是

：在
元素将标签文本的第一行推到右侧之前

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

我不是前端开发人员，但我尝试过更改填充、边距、左侧、位置等，但我不知所措

这就是它的样子：


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

你可以看到我到目前为止所做的一切


。集装箱箱{
显示：块；
最大宽度：200px；
}
.neat复选框{
显示：内联；
宽度：40px；
}
.neat复选框输入[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
左边距：0；
光标：指针；
不透明度：0；
z指数：1；
字体大小：10px！重要；
显示：无；
}
.整齐的复选框标签{
左边距：0px；
边缘顶部：2倍；
线高：17px！重要；
}
.neat复选框标签：之前{
字体系列：“FontAwesome”；
内容：“\f00c”；
颜色：白色；
位置：相对位置；
左：-5px；
顶部：0px；
大纲：无；
光标：指针；
显示：内联块；
宽度：17px；
高度：17px；
边框：1px实心#ced4da；
边界半径：3px；
背景色：#fff；
过渡：边框0.15s缓进缓出，颜色0.15s缓进缓出；
框大小：边框框；
字体大小：11px；
左侧填充：2px；
线高：17px；
}
.neat复选框输入[类型=复选框]：选中+标签：之前{
背景色：#2bb19e；
边框颜色：#2bb19e；
颜色：#fff；
字体系列：“FontAwesome”；
内容：“\f00c”；
字体大小：11px；
左侧填充：2px；
线高：17px；
}
.neat checkbox输入[type=“checkbox”]：焦点+标签：：之前{
边框颜色：#66afe9；
大纲：0；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
}

一些其他的东西
复选框的标签更多
问题在于，您正在使用相对位置移动复选框，因此保留了原始空间，但您只需将可视5px移到左侧

如果使用
left:-5px
可以添加
margin right:-5px
，或者删除
left
属性，只需使用
margin left:-5px
。
问题是，您正在使用相对位置移动复选框，因此保留原始空间，但只需将可视5px移动到左侧

如果使用
left:-5px
可以添加
margin right:-5px
，或者删除
left
属性，只需使用
margin left:-5px
即可。
给标签一些左填充，并将：before元素绝对放置在标签中。例如：


。集装箱箱{
显示：块；
最大宽度：200px；
}
.neat复选框{
显示：内联；
宽度：40px；
}
.neat复选框输入[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
左边距：0；
光标：指针；
不透明度：0；
z指数：1；
字体大小：10px！重要；
显示：无；
}
.整齐的复选框标签{
左边距：0px；
边缘顶部：2倍；
线高：17px！重要；
显示：内联块；/*使其成为块级别*/
位置：相对；/*以便子元素可以相对于它进行定位*/
左填充：25px；/*为伪复选框留出一些空间*/
}
.neat复选框标签：之前{
字体系列：“FontAwesome”；
内容：“\f00c”；
颜色：白色；
左：0px；
顶部：0px；
大纲：无；
光标：指针；
显示：块；/*使其成为块级别*/
位置：绝对；/*给出一个绝对位置（默认为0,0）*/
宽度：17px；
高度：17px；
边框：1px实心#ced4da；
边界半径：3px；
背景色：#fff；
过渡：边框0.15s缓进缓出，颜色0.15s缓进缓出；
框大小：边框框；
字体大小：11px；
左侧填充：2px；
线高：17px；
}
.neat复选框输入[类型=复选框]：选中+标签：之前{
背景色：#2bb19e；
边框颜色：#2bb19e；
颜色：#fff；
字体系列：“FontAwesome”；
内容：“\f00c”；
字体大小：11px；
左侧填充：2px；
线高：17px；
}
.neat checkbox输入[type=“checkbox”]：焦点+标签：：之前{
边框颜色：#66afe9；
大纲：0；
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
盒影：插入0 1px 1px rgba（0,0,0,0.075），0 0 8px rgba（102,175,233,0.6）；
}

一些其他的东西
复选框的标签更多
给标签留一些空白，并将：before元素绝对放在标签内。例如：


。集装箱箱{
显示：块；
最大宽度：200px；
}
.neat复选框{
显示：内联；
宽度：40px；
}
.neat复选框输入[类型=复选框]{
位置：绝对位置；
排名：0；
左：0；
左边距：0；
光标：指针；
不透明度：0；
z指数：1；
字体大小：10px！重要；
显示：无；
}
.整齐的复选框标签{
左边距：0px；
边缘顶部：2倍；
线高：17px！重要；
显示：内联块；/*使其成为块级别*/
位置：相对；/*以便子元素可以相对于它进行定位*/
左填充：25px；/*为伪复选框留出一些空间*/
}
.neat复选框标签：之前{
字体系列：“FontAwesome”；
内容：“\f00c”；
颜色：白色；
左：0px；
顶部：0px；
大纲：无；
光标：指针；
显示：块；/*使其成为块级别