How to Align Radio Buttons and Labels Horizontally in Forms?

Radio Buttons and Labels Aligned Horizontally

When creating forms, it can be frustrating to have labels and radio buttons appear on different lines. To resolve this issue and keep them aligned horizontally:

Solution:

Float the labels and radio buttons to the left and adjust padding and margins as necessary. Additionally, assign a class name to the radio buttons for older versions of Internet Explorer. To achieve identical inline alignment for all buttons, use the following HTML structure:

<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>

<code class="css">fieldset {
  overflow: hidden;
}

.some-class {
  float: left;
  clear: none;
}

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>

By following these guidelines, you can ensure that labels and radio buttons appear on the same line, providing a seamless user experience for filling out forms.

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