Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2003
    Location
    portugal
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    radio group in one line

    Hi,

    I'm trying to place the radio group (Mr and Mrs) all in one line only.
    That's what's happening now, but the radio buttons are not exactly in front of their labels.
    The form has many more elements so some of the css code applies to them.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
    <!--
    label {
    	display:block;
    	font-weight: bold;
    	text-transform: lowercase;
    	margin-bottom: 6px;
    	width: auto;
    }
    
    input, textarea {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    
    input, textarea, select  {
    	display: block;
    	width: 250px;
    	margin-bottom: 10px;
    }
    
    .radio input {
    	width: auto;
    	display:inline;
    }
    
    .radio {
    	display:inline;
    	font-weight: normal;
    	text-transform: none;
    }
    -->
    </style>
    </head>
    
    <body>
    <form id="form1" name="form1" method="post" action="">
    
        <label for="is_mr">Title:</label>
    
        <label class="radio">
        Mr.			
          <input type="radio" name="is_mr" value="1" id="RadioGroup1_0" checked="checked" />			    
      </label>
        <label class="radio">
        Mrs.
          <input type="radio" name="is_mr" value="0" id="RadioGroup1_1"  />			    
      </label>
        
    
        <label for="title">Title:</label>
    
        <input type="text" name="title" id="title" maxlength="50" value="" />
    
    </form>
    </body>
    </html>
    Thanks

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You were on the right track, you just overlooked the margin on the inputs.
    Code:
    .radio input {
    width: auto;
    display:inline;
    margin:0;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2003
    Location
    portugal
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much!


  •  

    Posting Permissions

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