css: how to display a radiobuttonlist horizontally? - html

Question

How can I align a radiobuttonlist horizontally? This one is to capture a gender value , male/female. I want to keep the name input css the same. This is the html:
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
The css:
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {
}
input,
label {
display: block;
}
Here is a codepen. Currently the buttons are in a vertical position.

Answer 1

If you want only the radio buttons, add this style:
#genderArea input, #genderArea label{
display: inline;
}
and use this HTML:
<div class="grid-container">
<div class="left-griditem">
<label for="name">Name</label>
<input id="name" type="text" name="name">
<label for="temp">Gender</label>
<span id="genderArea">
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<br>
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
</span>
</div>
<div class="right-griditem">2</div>
</div>

Answer 2

You have to wrap particular row which you want to make under a div/ a tag.
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {}
input,
label {
display: inline-block;
}
div.item>label:first-child {
width: 70px;
font-weight: bold;
}
div.item:first-child>input,
div.item:first-child>label {
display: block
}
body {
background: hsl(221, 64%, 24%);
color: hsl(235, 9%, 39%);
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 2rem 1rem 1rem 1rem;
}
div {
background: #fff;
padding: 1vw 2vw;
}
<div class="grid-container">
<div class="left-griditem">
<div class="item">
<label for="name">Name</label>
<input id="name" type="text" name="name">
</div>
<div class="item">
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="two" name="first_item" value="2" />
</div>
</div>
<div class="right-griditem">2</div>
</div>

Answer 3

Try this simple code using table, tr and td tags
<table>
<tr>
<td>
<label for="one">Male</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="1" />
</td>
<td style="widht:20px;"></td>
<td>
<label for="two">Female</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="2" />
</td>
</tr>
</table>
This approach gives you the flexibility to put controls, the way you want

Answer 4

Change this:
input,
label {
display: block;
}
To this:
input,
label {
display: inline;
}