html - 对齐 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>

标签： htmlcssalignmentrow

Answer 1

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

.LowerToppingsCheckBoxes{
   display: flex;
   display: -moz-inline-box;
   zoom: 2;
   width: 10%;
   text-align: center;
}