如何在JavaScript中动态地每行只有3个复选框

cgh8pdjw  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(136)

如何在JavaScript中动态地每行只有3个复选框。目前这是我现在所拥有的。

我希望它能像这样。

我尝试了不同的方法,但找不到解决办法。

s1ag04yj

s1ag04yj1#

你可以试试网格
div行是具有3列1fr的网格。
你可以添加你想要的div数,它总是3列
你可以把div行放到一个容器里。

.row {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  height: 100%;
}

.input {
  background-color: rgba(89, 3, 76, 0.5);
}
<div class="row">
  <div class="input">
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
    <label for="vehicle1"> I have a bike</label>
  </div>
  <div class="input">
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label>
  </div>
  <div class="input">
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label>
  </div>
  <div class="input">
    <input type="checkbox" id="vehicle4" name="vehicle1" value="Bike">
    <label for="vehicle4"> I have a bike</label>
  </div>
  <div class="input">
    <input type="checkbox" id="vehicle5" name="vehicle2" value="Car">
    <label for="vehicle5"> I have a car</label>
  </div>
</div>

相关问题