Question

我想我错过了一些东西，但我无法找到解决以下问题的方法。

我在句子列表中使用自定义复选框。起初它看起来不错但是一旦你检查了第一个复选框，它就会移动。我无法找到为什么复选框会在检查后移动？

这是一个小提琴：https://jsfiddle.net/Hodor_/vhhj7huv/
我注意到将content: "/2714";更改为content: ""; 复选框在点击时不会移动。

无法理解内容如何影响复选框的位置。

在其他问题中，我看到了使用vertical-align的建议：中间，它对我不起作用。

有什么想法吗？

Answer 1

我使用text-indent来隐藏内容，所以基本上内容总是在那里，现在复选框没有移动。

Here工作小提琴。

Answer 2

问题在于您使用display: flex与position: absolute相关联。它并不总是运作良好。

要解决此问题，您需要进行 3次简单更改：

1）从position: absolute

中删除label:before

2）从padding: 0 0 0 50px;

中删除label

3）将margin-right: 20px（或您想要的任何内容）添加到label:before。

简单..所以你的最终代码看起来像 - Fiddle here

label{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  cursor:pointer;
  color black;
}

label:before{
  /* position:absolute; */
  content:"";
  display:flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  left: 25px;
  text-align:center;
  font-size: 20px;
  color: white;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  transition: all 0.5s ease;
  margin-right: 20px;
}

请记住：flexbox允许您对元素进行“灵活”或流程控制，它会根据您的元素为您的元素定位元素提供更灵活的特性要求。
另一方面，
position: absolute确实相反。它会将元素从文档中移除，并允许您通过路线（left，right，top，bottom）将其放置在您想要的位置，更像是“<强烈的>严格的“或顽固的控制你的元素的方式。

点击

2 个答案: