如何对齐单选按钮？我希望它们能够排列在彼此之上。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贡献1725条经验 获得超7个赞
有多种方法可以做到这一点。
方法一：
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 关注
- 114 浏览
添加回答
举报
0/150
提交
取消