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

Barbara Streisand
Release: 2024-11-04 05:57:29
Original
753 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template