My checkboxes are currently displayed in a column format, but I would like them to be in a single row.
To better illustrate the issue, here is a photo: https://i.sstatic.net/PxRzB.jpg
I am seeking assistance on how to align the checkboxes horizontally instead of vertically.
.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>