Radio button text not aligned properly-CodePudding

So i am trying to add radio button on my survey form and the button and the text is completly in different positions so here is a picture of how it looks --> enter image description here

i tried display: inline; but still nothing changed

CodePudding user response：

The below code will work as you expected. Just add necessary attributes like name and for.

 <p>Would you recommend this survey to your friend:</p>
 <input type="radio" name="test" value="yes">
 <label for="test">Yes</label><br>

CodePudding user response：

According to the picture, your input tag width is 100%, that's why you are facing this issue. Add class inside input and use this CSS your problem has been fixed.

<style>
.inline-radio{width: auto;}
</style>

**HTML**
<p>Would you recommend this survey to your friend:</p>
<input type="radio" name="test" value="yes"  >
<label for="test">Yes</label>