Float radio buttons

https://codepen.io/JavaScriptOliver/pen/ZEEBBWR

am having difficulty floating the radio buttons on the same line as the questions and also for the checkboxes

I am guessing that you want to display all the radio buttons in one line. If that is the case you need to get rid of the label and the br tags. That is not the correct use of a label tag anyway since an input should not be enclosed by a label tag. Your code would look like this:

<div class="label">
<input id="Definitely" type="radio" name="recommend"> Definitely 
<input id="Maybe" type="radio" name="recommend"> Maybe 
<input id="Not-sure" type="radio" name="recommend"> Not sure
</div>

an input should always be connected to a Label tag, or by being nested inside the label or by using the for attribute. Not connecting label and input is really bad for accessibility

Hi iahleen, you are right, it should be linked I just don’t really think nesting makes as readable. But again that’s just my opinion. Taking this into account I guess a much better way to put the code would be:

 <div class="label">
<input id="Definitely" type="radio" name="recommend"> 
<label for="Definitely ">Definitely </label>
<input id="Maybe" type="radio" name="recommend">
<label for="Maybe">Maybe</label>
<input id="Not-sure" type="radio" name="recommend"> 
<label for="Not-sure">Not-sure</label>
</div>

I guess I was a bit lazy earlier to put the whole code :wink: