在 HTML 页面中,通常通过 input 标签的 type 属性为 radio 来创建一个单选按钮。然而,多数情况下,单选按钮并不会被紧密排列在一起,而是需要稍微调整其位置。以下是一种用 CSS 优化单选按钮布局的方式:
HTML 代码:
CSS 代码:
.radio-container {
display: flex;
flex-direction: column;
}
.radio-container input[type="radio"] {
margin-right: 5px;
}
.radio-container label {
margin-bottom: 5px;
}
上述代码中,我们在一个 container 容器内嵌套了三组单选按钮,容器通过设置 display: flex 和 flex-direction: column 变成了一个列布局,使得每个单选按钮分布在不同的行内。同时,我们通过设置单选按钮的 margin-right 和 label 的 margin-bottom 解决了它们之间的间距问题。