How to align radio buttons with labels in one line? [duplicate] - html

Question

This question already has answers here:
Radio buttons and label to display in same line
(15 answers)
Closed 7 years ago.
I have HTML form which contains labels and input (radio buttons). I used clear:both; and float:left; for aligning the labels on left and input on the same line front of it, and it worked but this also affect the radio buttons. I have two labels followed by radio button and then again one label and followed by radio button. How can I align these all (2 labels + radio button + label + radio button) all in one line?
I tried to use float:none and display:inline; but it did not work. The labels and radio buttons appear in the bottom of the label.
form label {
width: 225px;
font-weight: bold;
float: left;
clear: both;
}
form {
width: 70%;
}
form input {
float: left;
}
form input #yes,
form input #no {
display: inline;
float: none;
}
form label[for="yes"],
form label[for="no"] {
display: inline;
}
<form>
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text">
<label for="lname">Last name:</label>
<input id="lname" name="lname" type="text">
<label for="email">What is your email address?</label>
<input id="email" name="email" type="email">
<label for="when">When did it happen?</label>
<input id="when" name="when" type="text">
<label for="howlong">How long were you gone?</label>
<input id="howlong" name="howlong" type="text">
<label for="howmany">How many did you see?</label>
<input id="howmany" name="howmany" type="text">
<label for="desc">Describe them:</label>
<input id="desc" name="desc" type="text">
<label for="whatdo">What did they do to you?</label>
<input id="whatdo" name="whatdo" type="text">
<label for="seen">Have you seen my dog Fang?</label>
<label for="yes">Yes</label>
<input id="yes" name="seen" type="radio" value="yes">
<label for="no">No</label>
<input id="no" name="seen" type="radio" value="no">
</form>
I want to achieve this with CSS not HTML. There are answers that explain how to do it by restructuring the HTML, but I want to keep the same HTML structure.

Answer 1

Just need to reset a couple of the rules on those label and input elements.
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
form label {
width: 225px;
font-weight: bold;
float: left;
clear: both;
}
form {
width: 70%;
}
form input {
float: left;
}
form label[for="yes"],
form label[for="yes"] + input,
form label[for="no"],
form label[for="no"] + input {
clear: none;
width: auto;
}
<form>
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text">
<label for="lname">Last name:</label>
<input id="lname" name="lname" type="text">
<label for="email">What is your email address?</label>
<input id="email" name="email" type="email">
<label for="when">When did it happen?</label>
<input id="when" name="when" type="text">
<label for="howlong">How long were you gone?</label>
<input id="howlong" name="howlong" type="text">
<label for="howmany">How many did you see?</label>
<input id="howmany" name="howmany" type="text">
<label for="desc">Describe them:</label>
<input id="desc" name="desc" type="text">
<label for="whatdo">What did they do to you?</label>
<input id="whatdo" name="whatdo" type="text">
<label for="seen">Have you seen my dog Fang?</label>
<label for="yes">Yes</label>
<input id="yes" name="seen" type="radio" value="yes">
<label for="no">No</label>
<input id="no" name="seen" type="radio" value="no">
</form>
Or, simply select all the radio input elements.
form label[for="yes"],
form label[for="no"],
form input[type="radio"] {
clear: none;
width: auto;
}
form label {
width: 225px;
font-weight: bold;
float: left;
clear: both;
}
form {
width: 70%;
}
form input {
float: left;
}
form label[for="yes"],
form label[for="no"],
form input[type="radio"] {
clear: none;
width: auto;
}
<form>
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text">
<label for="lname">Last name:</label>
<input id="lname" name="lname" type="text">
<label for="email">What is your email address?</label>
<input id="email" name="email" type="email">
<label for="when">When did it happen?</label>
<input id="when" name="when" type="text">
<label for="howlong">How long were you gone?</label>
<input id="howlong" name="howlong" type="text">
<label for="howmany">How many did you see?</label>
<input id="howmany" name="howmany" type="text">
<label for="desc">Describe them:</label>
<input id="desc" name="desc" type="text">
<label for="whatdo">What did they do to you?</label>
<input id="whatdo" name="whatdo" type="text">
<label for="seen">Have you seen my dog Fang?</label>
<label for="yes">Yes</label>
<input id="yes" name="seen" type="radio" value="yes">
<label for="no">No</label>
<input id="no" name="seen" type="radio" value="no">
</form>

Answer 2

form label {
width: 225px;
font-weight: bold;
float: left;
clear: both;
}
form {
width: 70%;
}
form input {
float: left;
}
form .radio{
display: inline-block;
float: left;
width: 25px;
clear:none
}
<form>
<label for="fname">First name:</label>
<input id="fname" name="fname" type="text">
<label for="lname">Last name:</label>
<input id="lname" name="lname" type="text">
<label for="email">What is your email address?</label>
<input id="email" name="email" type="email">
<label for="when">When did it happen?</label>
<input id="when" name="when" type="text">
<label for="howlong">How long were you gone?</label>
<input id="howlong" name="howlong" type="text">
<label for="howmany">How many did you see?</label>
<input id="howmany" name="howmany" type="text">
<label for="desc">Describe them:</label>
<input id="desc" name="desc" type="text">
<label for="whatdo">What did they do to you?</label>
<input id="whatdo" name="whatdo" type="text">
<label for="seen">Have you seen my dog Fang?</label>
<label class="radio" for="yes">Yes</label>
<input class="radio" id="yes" name="seen" type="radio" value="yes">
<label class="radio" for="no">No</label>
<input class="radio" id="no" name="seen" type="radio" value="no">
</form>

Answer 3

Well, you have clear: both in your form label rule, so every label will begin in a new line. Add an additional class to the last three labels whose CSS rule contains clear: none

Answer 4

I think this is what you want, no css needed, just use a table
<form>
<table>
<tr><td>
<strong>First Name:</strong>
</td></tr>
<tr><td>
<input id="fname" name="fname" type="text">
</td></tr>
<tr><td>
<strong>Last Name:</strong>
</td></tr>
<tr><td>
<input id="lname" name="lname" type="text">
</td></tr>
<tr><td>
<strong>What is your email address?</strong>
</td></tr>
<tr><td>
<input id="email" name="email" type="text">
</td></tr>
<tr><td>
<strong>When did it happen?</strong>
</td></tr>
<tr><td>
<input id="when" name="when" type="text">
</td></tr>
<tr><td>
<strong>How long where you gone?</strong>
</td></tr>
<tr><td>
<input id="howlong" name="howlong" type="text">
</td></tr>
<tr><td>
<strong>How many did you see?</strong>
</td></tr>
<tr><td>
<input id="howmany" name="howmany" type="text">
</td></tr>
<tr><td>
<strong>Describe them:</strong>
</td></tr>
<tr><td>
<input id="desc" name="desc" type="text">
</td></tr>
<tr><td>
<strong>What did they do?</strong>
</td></tr>
<tr><td>
<input id="whatdo" name="whatdo" type="text">
</td></tr>
<tr><td>
<strong>Have you seen my dog Fang?</strong>
</td></tr>
<tr><td>
<input id="yes" name="seen" type="radio" value="yes">Yes
<input id="no" name="seen" type="radio" value="no">No
</td></tr>
</table>
</form>