I want to inline checkboxes and label in this particular code

Link to my code

Can anyone please see my code, and tell me what’s the problem in making the checkboxes and labels inline. I tried google and everything. Thankyou!

They are inline-block but you have given width to the input elements.

You have 100% on all input elements and 20% on the radio inputs. If you want to keep the 100% on all you can unset the width on the radio inputs width: unset;. You also have a left/right auto margin on all inputs.

I would avoid setting styles on all inputs that do not fit all inputs. Just do the basic stuff like any resetting of styles and normalizing.

Giving the radio input width is not going to make the label text align with the inputs. I would suggest using flexbox on the label and using the alignment options it has as well as using gap for the spacing.

You can’t just target all label elements, the selector needs to be specifically for the labels that contain radio and checkbox inputs (and whatever else it works with). This is just an example.

label {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: 5px;
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.