SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    space among radios

    I have this code:

    <input type="radio" value="1" id="Op1" name="Op1" /><label for="Op1">Option 1</label>
    <input type="radio" value="2" id="Op2" name="Op1" /><label for="Op2">Option 2</label>
    <input type="radio" value="3" id="Op3" name="Op1" /><label for="Op3">Option 3</label>
    <input type="radio" value="4" id="Op4" name="Op1" /><label for="Op4">Option 4</label>

    I want more space between each label and the next radio. I would like a general solution, not just por example positioning the first relatively at 50px, the second at 100px, etc.
    Is it possible? I can't find a proper css property
    Thank you!

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand correctly, either this:

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
     label{
    	padding-right:20px; 
    }
    </style>
    </head>
    <body>
    <input type="radio" value="1" id="Op1" name="Op1" /><label for="Op1">Option 1</label>
    <input type="radio" value="2" id="Op2" name="Op1" /><label for="Op2">Option 2</label>
    <input type="radio" value="3" id="Op3" name="Op1" /><label for="Op3">Option 3</label>
    <input type="radio" value="4" id="Op4" name="Op1" /><label for="Op4">Option 4</label>
    </body>
    </html>
    Or this:

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
     label{
    	padding-left:20px;
    	padding-right:20px;
    }
    </style>
    </head>
    <body>
    <input type="radio" value="1" id="Op1" name="Op1" /><label for="Op1">Option 1</label>
    <input type="radio" value="2" id="Op2" name="Op1" /><label for="Op2">Option 2</label>
    <input type="radio" value="3" id="Op3" name="Op1" /><label for="Op3">Option 3</label>
    <input type="radio" value="4" id="Op4" name="Op1" /><label for="Op4">Option 4</label>
    </body>
    </html>
    Two code samples are merely different spacing. Adjust to suit.
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Addict
    Join Date
    Apr 2004
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thank u!!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •