Question

我正在使用background-image：url导入一个复选框，然后单击该复选框时，相邻的复选框会向右移动，如何防止这种移动？我希望复选框固定在适当的位置。提供的图像链接只是一个示例。我正在尝试使选中标记在框中弹出。以下是代码段：https://jsfiddle.net/0py4enwb/

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">

  </head>

  <body>


    <div class="checkbox" style="background-color:white">
      <form>
      <label class="checkboxlabel" >
        <input class="checkboxparameter" type="checkbox" id="capacity"><span class="inputcheckbox"><span class="inputcheckboxcheckmark"></span></span></input>
      </label>
      <label class="checkboxlabel">
        <input class="checkboxparameter" type="checkbox" id="production"><span class="inputcheckbox"><span class="inputcheckboxcheckmark"></span></span></input>
      </label>
      </form>
    </div>


</body>

<script>
</script>

</html>

*{
  box-sizing: border-box;
}

body{
  margin:0;
  width:100vw;
  height:100vh;
}

.checkbox{
  width:100%;
  height:100%;
}

.inputcheckbox::before{
  background-image:url("/checkbox_notchecked_2.svg");
  background-size: 100% 100%;
    display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
}




.inputcheckbox::before{
  background-image:url("https://img.icons8.com/office/16/000000/add-image.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 75px;
  width:75px;
  content:"";
}

.checkboxlabel:nth-child(1) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
  position:relative;
  left:-75px;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}

.checkboxlabel:nth-child(2) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
  position:relative;
  left:-75px;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}

@keyframes animationcheckbox{
  from{
    transform:scale(0)
  }
  to{
    transform:scale(1)
  }
}

.checkboxparameter{
display:none;
}


.checkboxlabel{
cursor:pointer;
}

```

Answer 1

添加此代码..因为检查后图像不正确。现在添加absoulte的位置。它的工作正常

css

*{
  box-sizing: border-box;
}

body{
  margin:0;
  width:100vw;
  height:100vh;
}

.checkbox{
  width:100%;
  height:100%;
}

.inputcheckbox::before{
  background-image:url("/checkbox_notchecked_2.svg");
  background-size: 100% 100%;
    display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
}




.inputcheckbox::before{
  background-image:url("https://img.icons8.com/office/16/000000/add-image.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 75px;
  width:75px;
  content:"";
}

.checkboxlabel:nth-child(1) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
  position:absolute;
  left:0px;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}

.checkboxlabel:nth-child(2) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
   position:absolute;
  left:0px;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}
.inputcheckbox{
  position:relative;
}
@keyframes animationcheckbox{
  from{
    transform:scale(0)
  }
  to{
    transform:scale(1)
  }
}

.checkboxparameter{
display:none;
}


.checkboxlabel{
cursor:pointer;
}

```

Answer 2

这是解决方案：

*{
  box-sizing: border-box;
}

body{
  margin:0;
  width:100vw;
  height:100vh;
}

.checkbox{
  width:100%;
  height:100%;
}

.inputcheckbox::before{
  background-image:url("https://img.icons8.com/office/16/000000/add-image.png");
  display: inline-block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  height: 75px;
  width:75px;
  content:"";
}

.checkboxlabel:nth-child(1) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
  z-index: 1;
  position:absolute;
  left: 0;
  top: 0;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}

.checkboxlabel:nth-child(2) input[type=checkbox]:checked  + .inputcheckbox > .inputcheckboxcheckmark{
  background-image:url("https://img.icons8.com/material-outlined/24/000000/add-image.png");
  background-size: 100% 100%;
  display: inline-block;
  background-repeat: no-repeat;
  height:75px;
  width:75px;
  content:"";
  position:relative;
  left:-75px;
  animation-name:animationcheckbox;
  animation-duration:0.5s;
}

@keyframes animationcheckbox{
  from{
    transform:scale(0)
  }
  to{
    transform:scale(1)
  }
}

.checkboxparameter{
  display:none;
}


.checkboxlabel{
  cursor:pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
    <link rel="stylesheet" href="test.css">
  </head>

  <body>
    <div class="checkbox" style="background-color:white">
      <form>
      <label class="checkboxlabel" >
        <input class="checkboxparameter" type="checkbox" id="capacity"><span class="inputcheckbox"><span class="inputcheckboxcheckmark"></span></span>
      </label>
      <label class="checkboxlabel">
        <input class="checkboxparameter" type="checkbox" id="production"><span class="inputcheckbox"><span class="inputcheckboxcheckmark"></span></span>
      </label>
      </form>
    </div>
  </body>
</html>

该问题是由您的.inputcheckboxcheckmark span元素引起的。它具有relative的位置，这意味着即使您用left:-75px从视觉上将其向左拉，它仍继续占据页面的原始位置，从而在复选框之间形成空白。

为什么当选中复选框时，相邻的复选框会移动？

2 个答案: