li side by side

[Pervez]

Hi,

Below is my code, Here I want place main li side by side.how can i do this.....?
Here the inner li can expand/collapsed .

<form action=# >
<ul class="tree" >
<li>
<input type="checkbox">
<label>Select All</label>
<ul id="double">
<li><input class="cate" type='checkbox' name='' id='p_1'value='1'><label>AAAAAAAAAAAAAA</label>
<ul>
<li><input type='checkbox' name='0' id='p_10'value='1'><label>aaaaaaaa</label></li>
<li><input type='checkbox' name='1' id='p_11'value='1'><label>bbbbbbbb</label></li>
</ul>
</li>
<li><input type='checkbox' name='' id='p_1'value='1'><label>BBBBBBBBBBBB</label>
<ul>
<li><input type='checkbox' name='2' id='p_10'value='1'><label>aaaaaaa</label></li>
<li><input type='checkbox' name='3' id='p_11'value='1'><label>bbbbbbb</label></li>
<li><input type='checkbox' name='4' id='p_12'value='1'><label>ccccccc</label></li>
<li><input type='checkbox' name='5' id='p_11'value='1'><label>ddddddd</label></li>
</ul>
</li>
<li><input type='checkbox' name='' id='p_1'value='1'><label>CCCCCCCCCCCCC</label>
<ul>
<li><input type='checkbox' name='7' id='p_10'value='1'><label>aaaaa</label></li>
</ul>
</li>
<li><input type='checkbox' name='' id='p_1'value='1'><label>DDDDDDDDDDDDDD</label>
<ul>
<li><input type='checkbox' name='8' id='p_12'value='1'><label>aaaaaaaaa</label></li>
<li><input type='checkbox' name='9' id='p_11'value='1'><label>bbbbbbbbb</label></li>
<li><input type='checkbox' name='10' id='p_12'value='1'><label>cccccccc</label></li>
</ul>
</li>
<li><input type='checkbox' name='11' id='p_1'value='1'><label>EEEEEEEEEEEEE</label></li>
<li><input type='checkbox' name='' id='p_1'value='1'><label>FFFFFFFFFFFFFFF</label>
<ul>
<li><input type='checkbox' name='12' id='p_12'value='1'><label>aaaaaaaaaa</label></li>
<li><input type='checkbox' name='13' id='p_11'value='1'><label>bbbbbbbbbb</label></li>
</ul>
</li>
</ul>
</li>
</ul>
</form>

[Rowsdower!]

Originally Posted by Pervez

Hi,

Below is my code, Here I want place main li side by side.how can i do this.....?
Here the inner li can expand/collapsed .

<form action=# >
<ul class="tree" >
<li>
<input type="checkbox">
    <label>Select All</label>
        <ul id="double">
    <li><input class="cate" type='checkbox' name='' id='p_1'value='1'><label>AAAAAAAAAAAAAA</label>
	    <ul>
		<li><input type='checkbox' name='0' id='p_10'value='1'><label>aaaaaaaa</label></li>
		<li><input type='checkbox' name='1' id='p_11'value='1'><label>bbbbbbbb</label></li>
	    </ul>
    </li>
    <li><input type='checkbox' name='' id='p_1'value='1'><label>BBBBBBBBBBBB</label>
        <ul>
	    <li><input type='checkbox' name='2' id='p_10'value='1'><label>aaaaaaa</label></li>
	    <li><input type='checkbox' name='3' id='p_11'value='1'><label>bbbbbbb</label></li>
	    <li><input type='checkbox' name='4' id='p_12'value='1'><label>ccccccc</label></li>
	    <li><input type='checkbox' name='5' id='p_11'value='1'><label>ddddddd</label></li>
	</ul>
    </li>
    <li><input type='checkbox' name='' id='p_1'value='1'><label>CCCCCCCCCCCCC</label>
        <ul>
	    <li><input type='checkbox' name='7' id='p_10'value='1'><label>aaaaa</label></li>
	</ul>
    </li>
    <li><input type='checkbox' name='' id='p_1'value='1'><label>DDDDDDDDDDDDDD</label>
        <ul>
	    <li><input type='checkbox' name='8' id='p_12'value='1'><label>aaaaaaaaa</label></li>
	    <li><input type='checkbox' name='9' id='p_11'value='1'><label>bbbbbbbbb</label></li>
	    <li><input type='checkbox' name='10' id='p_12'value='1'><label>cccccccc</label></li>
	</ul>
    </li>
    <li><input type='checkbox' name='11' id='p_1'value='1'><label>EEEEEEEEEEEEE</label></li>
    <li><input type='checkbox' name='' id='p_1'value='1'><label>FFFFFFFFFFFFFFF</label>
        <ul>
	    <li><input type='checkbox' name='12' id='p_12'value='1'><label>aaaaaaaaaa</label></li>
	    <li><input type='checkbox' name='13' id='p_11'value='1'><label>bbbbbbbbbb</label></li>
	</ul>
    </li>
	</ul>
</li>
</ul>
</form>

For future reference, please wrap your code in [CODE][/CODE] tags. It makes things much easier to read.

That said, give this a try:

ul.tree>li{float:left;}

That makes any <li> element that is a DIRECT descendent of the ul.tree element have a left float. Any <li> elements who are children of a <ul> or <ol> of the ul.tree itself will NOT have a left float as long as you use the ">" designation in your CSS rule.

[fireplace_tea]

You can also set li to display: inline and see if you like that effect.

li{
  display: inline;
}