Member Avatar for 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

  • 5 Contributors
  • 4 Replies
  • 648 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by dipeshbeckham

Dani AI

Generated

Short version: the list (<ul>) is a block element by default, so it drops to a new line. is right that you need to change the list’s display; and are also correct that a fixed-width wrapper will force a wrap if there isn’t room. ’s approach makes it look correct, but it mixes presentation with semantics — a cleaner, more accessible pattern is to group the radios with a fieldset/legend and use labels.

A simple, modern solution (uses flex for a single horizontal row and keeps markup semantic):

<form class="filter-inline">
  <fieldset>
    <legend>Family filter</legend>
    <label><input type="radio" name="family" value="on"> On</label>
    <label><input type="radio" name="family" value="off"> Off</label>
  </fieldset>
</form>
.filter-inline fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.filter-inline legend { margin-right: 0.5rem; font-weight: normal; }
.filter-inline label { display: inline-flex; align-items: center; gap: 0.25rem; }

Troubleshooting notes: if you must keep the UL approach, set the UL to behave inline (or use inline-block on LI with vertical-align: middle) and reset browser margins/padding. If a fixed-width container (your #filterbox) is too narrow the row will wrap — either increase/remove the width, allow overflow, or use nowrap/flex-wrap: nowrap (but beware of horizontal overflow on small screens). For accessibility, prefer fieldset/legend or proper <label for="..."> associations rather than relying on layout alone. Finally, avoid inline JavaScript like onclick="submit();" if it causes unexpected submits while testing; use change handlers instead for clearer behavior.

Recommended Answers

All 4 Replies

Member Avatar for 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.

Member Avatar for 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

Member Avatar for 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.

Member Avatar for 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.