How to align radio buttons with labels in one line?

Question

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>