如何對(duì)齊單選按鈕？我希望它們能夠排列在彼此之上。jsfiddleHTML：<form> <label for="male">Male</label> <input type="radio" id="male" name="gender" value="male"> <br> <label for="female">Female</label> <input type="radio" id="female" name="gender" value="female"> <br> <label for="other">Other</label> <input type="radio" id="other" name="gender" value="other"></form>
1 回答
qq_遁去的一_1
TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
有多種方法可以做到這一點(diǎn)。
方法一：
label {
display: inline-block;
width: 80px;
}
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
<br>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<br>
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</form>
</body>
</html>
方法二：
div {
display: flex;
width: 90px;
justify-content: space-between;
}
<html>
<body>
<h2>Radio Buttons</h2>
<form>
<div>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male">
</div>
<br>
<div>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
</div>
<br>
<div>
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</div>
</form>
</body>
</html>
- 1 回答
- 0 關(guān)注
- 162 瀏覽
添加回答
舉報(bào)
0/150
提交
取消