[英]Radio Buttons side by side
Hi I have made a couple of radio buttons and want them side by side.嗨,我制作了几个单选按钮,并希望它们并排。
.gender-buttons{ margin-bottom: 6rem; }.gender-buttons input[type = "radio"]{ opacity: 0%; position: fixed; width: 0%; }.gender-buttons label{ display: inline-block; grid-template-columns: 1fr 1fr; padding: 20px; font-family: 'Nunito', sans-serif; font-size: 16px; border: 2px solid black; border-radius: 4px; }
<div class="main-container"> <div class="viewport"> <div class="gender-buttons" id="gender-buttons"> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> </div> </div> </div>
I want both Male and Female buttons to be side by side [MALE] [FEMALE] and be the selection when clicked on (as you can I see I removed the regular radio buttons) But for some reason they are stacked on TOP of eachother.我希望男性和女性按钮并排 [MALE] [FEMALE] 并在单击时成为选择(如您所见,我删除了常规单选按钮)但由于某种原因它们堆叠在彼此的顶部。 I've tried messing around like playing with rows and flexbox but nothing seems to be getting them to be side by side to eachother.
我试过像玩行和 flexbox 一样乱搞,但似乎没有什么能让他们并排在一起。
You have to use display: inline-block;
你必须使用
display: inline-block;
so they can fit all on one line.因此它们可以全部放在一条线上。
float: left;
would be also a possebility.也是一种可能。
First of all, to make the HTML cleaner, I suggest that you put each input with their respective label inside a div container.首先,为了使 HTML 更干净,我建议您将每个输入及其各自的 label 放在一个 div 容器中。
Next step would be to apply styling on the .gender-buttons
class, which is the parent of the radio buttons.下一步是在
.gender-buttons
class 上应用样式,它是单选按钮的父级。
You have two options here, using display: inline-block
, but personally I would recommend using display: flex
, since it will give a lot more flexibility when it comes to arranging the radio buttons.这里有两个选项,使用
display: inline-block
,但我个人建议使用display: flex
,因为它在安排单选按钮时会提供更多的灵活性。 You could also add flex-wrap: wrap
, which will make your radio buttons flow with the browser size, and they will automatically span on as many rows as needed for them to be displayed.您还可以添加
flex-wrap: wrap
,这将使您的单选按钮随浏览器大小流动,并且它们将自动跨越所需的行数以显示它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.