Vertically Align Radio Buttons In Form

SimonTemplar · 27-01-2014 7:41pm #1

I'm trying to code a form where the labels are right aligned against their inputs and I think I have succeeded. However, I am trying to get the radio inputs to align vertically underneath each other but I am struggling. Basically, every radio should be underneath "Ireland".

I'm been researching for the past few hours and everything suggested isn't working for me. What is the easiest/best way to achieve this? Thanks

<html>
<head>

<style type="text/css">

label{
    width:100px;
    display: block;
    text-align: right;
    float:left;
    margin-right: 5px;  
}

label, input{
    margin-bottom: 5px;    
}

</style>

</head>
<body>

<form>

<label for="fname">Firstname: </label>
<input type="text" id="fname"/><br/>

<label for="sname">Surname: </label>
<input type="text" id="sname"/> <br/>

<label for="country">Country: </label>
<input type="radio" id="country"/> Ireland
<input type="radio" id="country"/> UK
<input type="radio" id="country"/> France 
<input type="radio" id="country"/> Italy
<input type="radio" id="country"/> Spain

</form>

</body>
</html>

Creamy Goodness · 27-01-2014 8:02pm

ah good old vertical-align,

here's my go to site on it — http://phrogz.net/CSS/vertical-align/

more in-depth look — http://css-tricks.com/almanac/properties/v/vertical-align/

SimonTemplar · 27-01-2014 8:24pm

Thanks but I don't think that answers my question. I don't need text to be aligned within a container. I need the 'circle' of each radio input to be directly underneath each other with all the option aligned along the right vertical axis of the label, like http://download.oracle.com/tech/blaf/specs/standardwebwidgets/radiobuttons_verticalalign.gif

tricky D · 27-01-2014 8:54pm

With styles inline and border for vis ref

<form>
<section style="border:1px dashed blue;"><label for="country" style="border:1px solid red; vertical-align:top">Label</label>
<section style="display:inline-block; align:right;"><input type="radio" id="country" />
Ireland<br>
<input type="radio" id="country"/>
UK<br>
<input type="radio" id="country"/>
France <br>
<input type="radio" id="country"/>
Italy<br>
<input type="radio" id="country"/>
Spain</section>
</section>
</form>

onemorechance · 27-01-2014 8:59pm

I had it written so I'll post anyway!

<html>
	<head>
		<style type="text/css">
			label{
				width:100px;
				display: block;
				text-align: right;
				float:left;
				margin-right: 5px;  
			}
			label, input{
				margin-bottom: 5px;    
			}
				#left {
				float: left;
			}
				#right {
				float: left;
			}
		</style>
	</head>
	<body>
		<form>
			<div id="left">
				<label for="fname">Firstname: </label>
				<br/>
				<label for="sname">Surname: </label>
				<br/>
				<label for="country">Country: </label>
			</div>
			<div id="right">
				<input type="text" id="fname"/>
				<br/>
				<input type="text" id="sname"/>
				<br/>
				<input type="radio" id="country"/> Ireland
				<br/>
				<input type="radio" id="country"/> UK
				<br/>
				<input type="radio" id="country"/> France 
				<br/>
				<input type="radio" id="country"/> Italy
				<br/>
				<input type="radio" id="country"/> Spain
				<br/>
			</div>
		</form>
	</body>
</html>

Vertically Align Radio Buttons In Form

Comments