0

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

5
Contributors
4
Replies
5
Views
5 Years
Discussion Span
Last Post by dipeshbeckham
0

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.

0

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

0

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.

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.