radio group in one line

nunomira · 06-22-2007, 06:36 PM

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

_Aerospace_Eng_ · 06-22-2007, 07:10 PM

You were on the right track, you just overlooked the margin on the inputs.

Code:

.radio input {
width: auto;
display:inline;
margin:0;
}

nunomira · 06-22-2007, 07:21 PM

Thank you very much!