Question

我使用inline-flex将三个部分彼此相邻。在我的第三部分中，我希望我的复选框一个在另一个的下面。

.partOne section {
  display: inline-flex;
}

.checkbox section {
  display: block;
}

<div class="partOne">
  <section>
    <label>name: </label>
    <label class="lblName">Jessica</label>
  </section>
  <section>
    <label class="lblAds">Pet:</label>
  </section>
  <section class="checkbox">
    <section>
      <input type="checkbox" name="box1" value="Dog">
      <label for="checkbox">Dog</label>
    </section>
    <section>
      <input type="checkbox" name="box2" value="Cat">
      <label for="checkbox">Cat</label>
    </section>
    <section>
      <input type="checkbox" name="box3" value="Bird">
      <label for="checkbox">Bird</label>
    </section>
  </section>
</div>

但是我的复选框不能在另一个复选框之下。

Answer 1

只需将.chekbox转换为flex元素，然后将其赋予flex-direction: column。

这可以在下面看到：

.checkbox {
  display: flex;
  flex-direction: column;
}

<div class="partOne">
  <section>
    <label>name: </label>
    <label class="lblName">Jessica</label>
  </section>
  <section>
    <label class="lblAds">Pet:</label>
  </section>
  <section class="checkbox">
    <section>
      <input type="checkbox" name="box1" value="Dog">
      <label for="checkbox">Dog</label>
    </section>
    <section>
      <input type="checkbox" name="box2" value="Cat">
      <label for="checkbox">Cat</label>
    </section>
    <section>
      <input type="checkbox" name="box3" value="Bird">
      <label for="checkbox">Bird</label>
    </section>
  </section>
</div>

如果您还想将Name和Pet放在一行中，可以给.partOne display: inline-flex，如下所示：

.partOne {
  display: inline-flex;
}

.checkbox {
  display: flex;
  flex-direction: column;
}

<div class="partOne">
  <section>
    <label>name: </label>
    <label class="lblName">Jessica</label>
  </section>
  <section>
    <label class="lblAds">Pet:</label>
  </section>
  <section class="checkbox">
    <section>
      <input type="checkbox" name="box1" value="Dog">
      <label for="checkbox">Dog</label>
    </section>
    <section>
      <input type="checkbox" name="box2" value="Cat">
      <label for="checkbox">Cat</label>
    </section>
    <section>
      <input type="checkbox" name="box3" value="Bird">
      <label for="checkbox">Bird</label>
    </section>
  </section>
</div>

Answer 2

将.checkbox部分设为弹性列。

.partOne section {
  display: inline-flex;
}

.checkbox {
  display: flex;
  flex-direction: column;
}

<div class="partOne">
  <section>
    <label>name: </label>
    <label class="lblName">Jessica</label>
  </section>
  <section>
    <label class="lblAds">Pet:</label>
  </section>
  <section class="checkbox">
    <section>
      <input type="checkbox" name="box1" value="Dog">
      <label for="checkbox">Dog</label>
    </section>
    <section>
      <input type="checkbox" name="box2" value="Cat">
      <label for="checkbox">Cat</label>
    </section>
    <section>
      <input type="checkbox" name="box3" value="Bird">
      <label for="checkbox">Bird</label>
    </section>
  </section>
</div>

Answer 3

我想我也要提到您的标签也不正确。 “ for”需要指向一个ID .....看起来应该更像这样。我添加了ADA和tabindex的角色，以便它与空格键一起使用。

 <section>
    <input type="checkbox" role="checkbox" tabindex="0" id="box3" name="Bird" value="Bird">
    <label for="box3">Bird</label>
</section>

在SECTION内显示块

3 个答案: