The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Radio buttons not lining up
sailormaysmom
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2017, 06:38 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,624
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd July 2017 - 07:40 AM