How to Align Radio Buttons and Labels on the Same Line in HTML?

Positioning Radio Buttons and Labels on the Same Line

In HTML forms, aligning radio buttons and their associated labels on a single line can be challenging. To achieve this, several CSS techniques can be employed.

The suggested HTML structure positions the label and input elements:

<code class="html"><label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1"></code>

To align them horizontally, add the following CSS rules:

<code class="css">label {
  float: left;
  clear: none;
  display: block;
  padding: 0px 1em 0px 8px;
}

input[type=radio],
input.radio {
  float: left;
  clear: none;
  margin: 2px 0 0 2px;
}</code>

This positions the label and radio button next to each other. To ensure that multiple radio buttons are aligned on the same line, use the following markup:

<code class="html"><fieldset>
  <div class="some-class">
    <input type="radio" class="radio" name="x" value="y" id="y">
    <label for="y">Thing 1</label>
    <input type="radio" class="radio" name="x" value="z" id="z">
    <label for="z">Thing 2</label>
  </div>
</fieldset></code>

With the appropriate CSS rules, the radio buttons and labels will be aligned on the same line.

The above is the detailed content of How to Align Radio Buttons and Labels on the Same Line in HTML?. For more information, please follow other related articles on the PHP Chinese website!