How to align radio button to the left of my text? - html

Question

So for my raid buttons, I want them to align to the right of my text, like other elements above, but I cant figure out how.
Here is the fiddle and code I have for my buttons.
<label>What kind of Ice Cream you like?</label>
<label><input type="radio" name="icecream" value="choco" id="radio"> Chocolate</label><br>
<label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label><br>
<label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label><br>
https://jsfiddle.net/russiandobby/gfj1nper/4/
I tried many ways but my radio buttons either end up under the text or messed up order like that.

Answer 1

Try using an id for each radio, like this:
<div>
<label for="chocolate">Chocolate</label>
<input type="radio" name="icecream" value="choco" id="chocolate">
</div>
*edited

Answer 2

<input type="radio" name="icecream" value="choco" id="chocolate">
<label for="chocolate">Chocolate</label>
<input type="radio" name="icecream" value="choco" id="vanila">
<label for="vanila">Vanila</label>
the name attribute should have same value rather than the id's having same value

Answer 3

You'll need to mess with the styling more to align everything exactly how you want it, but to get the radio inputs to the right of the text simply put the <input> element after the <label> element.
At the moment your <label> is wrapping the input. Place it wholly before the <input> element.
Additionally: for usability and accessibility, clicking the label should trigger your radio input. To enable this set a for="" attribute on each label that matches a unique id="" attribute for each input.
<label for="choco">Chocolate</label><input type="radio" name="icecream" value="choco" id="choco">
<label for="vanil">Vanilla</label><input type="radio" name="icecream" value="vanil" id="vanil">
<label for="rocky">Rocky Road</label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="rocky">

Answer 4

Try These Solutions
body{
background-color:#42f4e2;
}
#title{
text-align:center;
font-family: 'Lobster', cursive;
font-size: 50px;
}
#mainform{
background-color:#e8ecf2;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-radius: 10px;
}
label{
display: inline-block;
width: 140px;
text-align: right;
margin-right: 40px;
margin-top: 20px;
}
#survey-form{
display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
text-align:center;
}
select{
display: inline-block;
height:30px;
text-align: right;
margin-right: 40px;
margin-top: 20px;
}
.redio-wrap label{
display: inline-block;
margin-right: 10px;
width: auto;
}
.redio-wrap label:first-child{
width: 140px;
margin-right: 40px;
}
<h1 id="title">Survey Form</h1>
<div id="mainform">
<form action="/action_page.php" method="get" id="survey-form">
<label>*First name:</label> <input type="text" name="fname" placeholder="Enter your name"><br>
<label>*Email:</label> <input type="text" name="email" placeholder="Enter your Email"><br>
<label>*Age:</label> <input type="text" name="age" placeholder="Enter your Age"><br>
<!--For the Drop Down menu-->
<label>Describe your mood:</label>
<select>
<option value="" disabled selected>Select your option</option>
<option value="happy">Happy</option>
<option value="sad">Sad</option>
<option value="angry">Angry</option>
<option value="neutral">Neutral</option>
</select><br>
<!--For the Drop Down menu end-->
<!--Radio buttons start-->
<div class="redio-wrap">
<label>What kind of Ice Cream you like?</label>
<label><input type="radio" name="icecream" value="choco" id="radio"> Chocolate</label>
<label><input type="radio" name="icecream" value="vanil" id="radio">Vanilla</label>
<label><input type="radio" style="vertical-align: middle" name="icecream" value="rocky" id="radio">Rocky Road</label>
</div>
</form>
</div>

Answer 5

I had the same problem, and upon reviewing I found the following to solve the problem, which I applied to your ice cream variables:
First, in the HTML window, apply the following:
<div class="rowTab">
<div class="labels">
<label for="ice cream Type"> What kind of Ice Cream you like?</label>
<div/>
<div class="rightTab">
<ul style="list-style: none;">
<li class="radio">
<label>Chocolate<input name="radio-buttons"
value="1" type="radio" class="ice cream Type"></label></li>
<li class="radio">
<label>Vanilla<input name="radio-buttons"
value="2" type="radio" class="ice cream Type"></label></li>
<li class="radio">
<label>Rocky Road<input name="radio-buttons"
value="3" type="radio" class="ice cream Type"></label></li>
THEN, in the CSS window apply the following:
.ice cream type,
input[type="checkbox"] {
float: right;
margin-right:??px;
}
In this case, from the HTML window you are defining the class 'ice cream type' for each flavor, then in the CSS window you are styling it with 'float: right;' which should put the radio buttons to the RIGHT of each flavor's name..