Radio buttons not lining up |
Radio buttons not lining up |
sailormaysmom |
Apr 17 2017, 04:05 PM
Post
#1
|
Group: Members Posts: 2 Joined: 17-April 17 Member No.: 26,375 |
I am trying to get my radio buttons to line up on the middle to the right side. The text on the left side of them is staggered but the buttons need to be in a vertical straight line going down. This is the code I have for my radio button...I am unsure if this is what I need or not.....
input.radio { display: block; float: left; } Here is the code for the labels and buttons themselves... <fieldset><legend>Best Picture</legend> <div> <label for = "hills"></label>The Hills of Farmingdale</label> <input type= "radio" name = "hills" id = "hills" value = "hills" /> </div> <div> <label for = "storm"></label>Storm Front</label> <input type= "radio" name = "storm" id = "storm" value = "storm" /> </div> <div> <label for = "danger"></label>An Evening with Danger</label> <input type= "radio" name = "danger" id = "danger" value = "danger" /> </div> <div> <label for = "moon"></label>Moon Over Bethpage</label> <input type= "radio" name = "moon" id = "moon" value = "moon" /> </div> </fieldset> The labels are lined up to the left and the buttons follow....I need the buttons to line up to the middle right and the words to get go with the buttons... ex...... The Hills of Farmingdale * Storm Front * An Evening with Danger * Moon Over Bethpage * This is lining up with everything to the left but I need the buttons along with the text to line up to the right of course the * represent a radio button....any help is appreciated....this is basic HTML....just stumped! This post has been edited by sailormaysmom: Apr 17 2017, 04:08 PM |
pandy |
Apr 18 2017, 06:38 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You could float the radio buttons right. To keep it together limit the width of either the fieldset or the DIVs.
To stop the CSS from affecting other fieldsets, radio buttons and DIVs you may have I'd give the fieldset an ID so a specific selector can be used. HTML <fieldset id="foo"><legend>Best Picture</legend> CODE #foo input[type=radio] { float: right } And either this CODE #foo { width: 20em } or this. CODE #foo div { width: 20em } Change the width to your liking, of course. |
Lo-Fi Version | Time is now: 23rd April 2024 - 01:47 PM |