displaying text and buttons in one line

[Xufyan]

I have a form having two radio buttons and one heading,

<form name="f1" method="POST" action="<?php echo $PHP_SELF;?>">
Family filter:
<ul>
<li><input type="radio" name="r1" value="o" onclick="submit();">On</li>
<li><input type="radio" name="r1" value="p" onclick="submit();">Off</li>
</ul>
</form>
</div>

CSS,

#filterbox {border-radius:8px; width:208px; margin-bottom:15px; background-color:#e1f6fa;}
#filterbox ul{margin: 0; padding: 0; list-style-type: none;}
#filterbox ul li {display:inline;}

and here is the output :

Family filter:
On Off

but the output should be this,

Family filter: On off

What is wrong with my code ? :? please help

[simplypixie]

That is because even though you have set you list items to be displayed inline, you have done nothing with the actual unordered list tag so it will automatically put it below you text.
Try adding display: inline; to your ul tag css.

[lps]

The problem exist because you have set the width of its wrapper(#filterbox). Therefore, if the content is larger than the width set, dissplay:inline will just align the overflow area to a new line

[Dandello]

simplypixie has the correct answer - the ul has to be inline as well as the li.
THEN if it's going to the next line, adjust the width of the wrapper.

[dipeshbeckham]

Here is the code you are looking for.
Feel free to write.

<style type="text/css">
	#filterbox {border-radius:8px; width:208px; margin-bottom:15px; background-color:#e1f6fa;}
	#filterbox ul{margin: 0; padding: 0; list-style-type: none;}
	#filterbox ul li {display:inline;}
	
	#FormPost ul{
		list-style-type:none;
	}
	
	#FormPost ul li{
		display:inline;
	}
	
</style>

<form name="f1" method="POST" action="<?php echo $PHP_SELF;?>" id="FormPost">
	<ul>
		<li>Family filter:</li>
		<li><input type="radio" name="r1" value="o" onclick="submit();">On</li>
		<li><input type="radio" name="r1" value="p" onclick="submit();">Off</li>
	</ul>
</form>