Radio buttons and label to display in same line

The CSS flexbox effect

When the humble inline-block just isn't enough, you can call upon the powerful CSS flexbox to save the day. With flexbox, we can create a flexible layout keeping our radio buttons and labels in line:

.form-flex {
  display: flex;
  align-items: center;
  /* Like a well-choreographed boy band, everything in line, in sync */
}

.radio-flex {
  margin-right: 10px; /* Ensures our radio button and label duo aren't too close for comfort */
}


Wrap your input-label pairs in a div with the form-flex class to apply this stylish little line dance:

<div class="form-flex">
  <div class="radio-flex">
    <input type="radio" name="options" id="option3">
    <label for="option3">Option 3</label>
  </div>
  <div class="radio-flex">
    <input type="radio" name="options" id="option4">
    <label for="option4">Option 4</label>
  </div>
</div>


Accessibility and beyond

For superb accessibility, never forget to link labels accurately with their corresponding inputs by using the for attribute. Clicking the label will then toggle the linked radio button—a boon for those using assistive devices.

Implementation: Beyond the basics

Award-winning floats strategy

Sometimes, the simple float can take you a long way. Deploy the CSS float to position radio buttons and labels side by side in a clutter-free manner:

.radio-float label, .radio-float input {
  float: left; // Float like a butterfly
  clear: none; // No need to clear the dance floor
}


Presenting your buttons

Beyond positioning, style consistency is key to create a uniform look. Manage your input fields and labels with precise widths and thoughtfully applied padding:

.radio-inline input {
  width: 20px; /* Because size does matter when it comes to radio buttons */
  margin-right: 5px; /* Breathing room is essential */
}


A dance for all screen sizes

Ensure your radio buttons and labels are set to charm screens of all sizes. Implement media queries to make your layout responsive and fit for all:

@media screen and (max-width: 600px) {
  .form-flex {
    flex-direction: column;
  }
}


With this code picked straight from the CSS rulebook of responsive design, your radio buttons and labels will dance in sync, no matter how small the screen.

Mastering forms: The dance of the elements

Strategic approach to grouping

Rein in a fieldset and div structure for enhanced management. It's like choreographing the dance sequence of your form, followed diligently by your buttons:

<fieldset>
  <legend>Select an Option</legend>
  <div class="radio-inline">
    <!-- Here we have our radio and label duo -->
  </div>
</fieldset>


Responsive radio rhythms

With the dance moves changing based on screen sizes, your form needs to be quick on its feet. Agile layout types like CSS flexbox and grid will help your buttons and labels adjust and align well.

Compatibility: From salsa to jive

Like diversity in a troupe, including the aging IE, your form must play well with all browsers. Strategic class naming and careful style resets can avert any unexpected disarray.