Align Radio Buttons

Hello everyone, I’m coding my second project from FCC, the survey form. I’m trying to align a set of radio buttons in 2 columns with 3 buttons each, but I can’t. I tried to use the flexbox property and the column-count property.

Você recomendaria a loja para um amigo?<br>
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Com certeza"
      value="comctz"
      checked
      />Com certeza
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Provavelmente sim"
      value="provs"     
      />Provavelmente sim
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Talvez"
      value="talvez"      
      />Talvez
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Não sei"
      value="nsei"      
      />Não sei
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Provavelmente não"
      value="provn"      
      />Provavelmente não
    <input 
      name="recomendacao" 
      type="radio" 
      alt="Definitivamente não"
      value="defn"
      />Definitivamente não

If you want the complete code, here is the code pen
It’s in portuguese because I’m brazilian.
Help me please!

  1. You have misspelled label on some closing tags. You have </lable>

  2. You are missing the labels for the radio inputs.

  3. After you have nested all the checkbox and radio elements inside the labels. Try making the label element a flexbox container.

Each radio input should have a lable?

Yes. Each piece of text that is associated with a checkbox or radio input should be a label. This also means you can nest the inputs inside the label and use it as a container for the element and the text.

Careful, you did it again. It’s label, not lable (el not le).

It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
It’s label, not lable.
Done. I misspoke everytime, thanks for the explanation, and I will fix the code.

No worries I suck at that word as well.

I’m not a native English speaker either. I read just fine but my spelling sucks (both Native and English unfortunately).

  1. For text, I use the Grammarly extension.

  2. For code, I use any help I can get, code formatters, code linters, and spell checkers.


I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. Press the down arrow to the right of the HTML code box and select Tidy HTML. Now look at the HTML, if there are issues you should see tags marked in red. That is the new Syntax Highlighting showing you where the problems are.

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