Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Vertically Align Radio Buttons In Form

  • 27-01-2014 7:41pm
    #1
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭


    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>


Comments

  • #2
    Creamy Goodness
    Registered Users Posts: 26,556 ✭✭✭✭Creamy Goodness


    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/


  • #3
    SimonTemplar
    Registered Users Posts: 2,815 ✭✭✭SimonTemplar


    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


  • #4
    tricky D
    Closed Accounts Posts: 9,700 ✭✭✭tricky D


    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>


  • #5
    onemorechance
    Registered Users Posts: 3,078 ✭✭✭onemorechance


    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>


Advertisement