对齐 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{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: space-around;}.LowerToppingsCheckBoxes{&nbsp; &nbsp;display: inline-block;&nbsp; &nbsp;display: -moz-inline-box;&nbsp; &nbsp;*display: inline;&nbsp; &nbsp;zoom: 2;&nbsp;&nbsp; &nbsp;width: 200px;&nbsp; &nbsp;text-align: center;}.LowerToppingsCheckBoxes div{display:inline-block;}<div class="lowerToppings">&nbsp; &nbsp; <img src="olivee.jpg" width="100" height="100">&nbsp; &nbsp; <img src="onion.jpg" width="100" height="100">&nbsp; &nbsp; <img src="bellpepper.jpg" width="100" height="100">&nbsp; &nbsp; </div>&nbsp; &nbsp; <br></br>&nbsp; &nbsp; <div class="LowerToppingsCheckBoxes">&nbsp; &nbsp; <div><input type="checkbox" id="cheese" name="toppings" value="cheese"></div>&nbsp; &nbsp; <div><input type="checkbox" id="pepperoni" name="toppings" value="pepperoni"></div>&nbsp; &nbsp; <div><input type="checkbox" id="mushroom" name="toppings" value="mushroom"></div>&nbsp; &nbsp; <div><input type="checkbox" id="pepper" name="toppings" value="pepper"></div>&nbsp; &nbsp; <div><input type="checkbox" id="basil" name="toppings" value="basil"></div>&nbsp; &nbsp; </div>

Answer 2

<div class="LowerToppingsCheckBoxes">&nbsp; &nbsp; <input type="checkbox" id="cheese" name="toppings" value="cheese">&nbsp; &nbsp; <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">&nbsp; &nbsp; <input type="checkbox" id="mushroom" name="toppings" value="mushroom">&nbsp; &nbsp; <input type="checkbox" id="pepper" name="toppings" value="pepper">&nbsp; &nbsp; <input type="checkbox" id="basil" name="toppings" value="basil"></div>.LowerToppingsCheckBoxes{&nbsp; ...&nbsp; flex-direction: row; // add this}您可以增加容器的宽度以适合所有复选框。

Answer 3

您可以更改 .LowerToppingsCheckBoxes 的显示以弯曲它会将您的复选框排列在行中.LowerToppingsCheckBoxes{&nbsp; &nbsp;display: flex;&nbsp; &nbsp;display: -moz-inline-box;&nbsp; &nbsp;zoom: 2;&nbsp; &nbsp;width: 10%;&nbsp; &nbsp;text-align: center;}