我試圖將我的復選框全部排成一排。由于某種原因，它們位于一列中。這是正在發生的事情的照片：我需要幫助將復選框排列在一行而不是一列中。.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>
3 回答
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
.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>
慕村225694
TA貢獻1880條經驗 獲得超4個贊
<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
}
您可以增加容器的寬度以適合所有復選框。
繁星淼淼
TA貢獻1775條經驗 獲得超11個贊
您可以更改 .LowerToppingsCheckBoxes 的顯示以彎曲它會將您的復選框排列在行中
.LowerToppingsCheckBoxes{
display: flex;
display: -moz-inline-box;
zoom: 2;
width: 10%;
text-align: center;
}
- 3 回答
- 0 關注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消