对齐 HTML 中非内联的复选框

Question

我试图将我的复选框全部排成一排。由于某种原因，它们位于一列中。这是正在发生的事情的照片：我需要帮助将复选框排列在一行而不是一列中。.lowerToppings{  display: flex;  justify-content: space-around;}.LowerToppingsCheckBoxes{ display: inline-block;   display: -moz-inline-box;   *display: inline;   zoom: 2;    width: 10%;   text-align: center;}<div class="lowerToppings">  <img src="olivee.jpg" width="100" height="100">  <img src="onion.jpg" width="100" height="100">  <img src="bellpepper.jpg" width="100" height="100">  </div>  <br></br>  <div class="LowerToppingsCheckBoxes">  <div><input type="checkbox" id="cheese" name="toppings" value="cheese"></div>  <div><input type="checkbox" id="pepperoni" name="toppings" value="pepperoni"></div>  <div><input type="checkbox" id="mushroom" name="toppings" value="mushroom"></div>  <div><input type="checkbox" id="pepper" name="toppings" value="pepper"></div>  <div><input type="checkbox" id="basil" name="toppings" value="basil"></div>  </div>

Answer 1

.lowerToppings

{

    display: flex;

    justify-content: space-around;

}

.LowerToppingsCheckBoxes{

   display: inline-block;

   display: -moz-inline-box;

   *display: inline;

   zoom: 2; 

   width: 200px;

   text-align: center;

}

.LowerToppingsCheckBoxes div{display:inline-block;}

<div class="lowerToppings">

    <img src="olivee.jpg" width="100" height="100">

    <img src="onion.jpg" width="100" height="100">

    <img src="bellpepper.jpg" width="100" height="100">

    </div>

    <br></br>

    <div class="LowerToppingsCheckBoxes">

    <div><input type="checkbox" id="cheese" name="toppings" value="cheese"></div>

    <div><input type="checkbox" id="pepperoni" name="toppings" value="pepperoni"></div>

    <div><input type="checkbox" id="mushroom" name="toppings" value="mushroom"></div>

    <div><input type="checkbox" id="pepper" name="toppings" value="pepper"></div>

    <div><input type="checkbox" id="basil" name="toppings" value="basil"></div>

    </div>

Answer 2

<div class="LowerToppingsCheckBoxes">

    <input type="checkbox" id="cheese" name="toppings" value="cheese">

    <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">

    <input type="checkbox" id="mushroom" name="toppings" value="mushroom">

    <input type="checkbox" id="pepper" name="toppings" value="pepper">

    <input type="checkbox" id="basil" name="toppings" value="basil">

</div>

.LowerToppingsCheckBoxes{

  ...

  flex-direction: row; // add this

}

您可以增加容器的宽度以适合所有复选框。

Answer 3

您可以更改 .LowerToppingsCheckBoxes 的显示以弯曲它会将您的复选框排列在行中

.LowerToppingsCheckBoxes{

   display: flex;

   display: -moz-inline-box;

   zoom: 2;

   width: 10%;

   text-align: center;

}