Display inline problem

Consider the following HTML structure:

<div id="footer">
                <div id="content">
                    <ul>
                        <li>
                            <ul>
                                <li>AAA</li>
                                <li>AAA</li>
                                <li>AAA</li>

                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>BBB</li>
                       开发者_StackOverflow         <li>BBB</li>
                                <li>BBB</li>
                            </ul>
                        </li>
                    </ul>
                </div>
    </div>

Next I apply the following CSS:

#content ul {
    list-style: none;
}

#content ul li{
    display: inline;
}

The output is: AAA AAA AAA BBB BBB BBB The required output is:

AAA BBB 

AAA BBB 

AAA BBB

Any help will be greatly appreciated.

You could just float both lists next to each other.

#content ul { list-style:none; }
#content > ul > li { float:left; margin-right:1em; }

http://jsfiddle.net/geertdd/Cu49F/1/

You can achieve this by deleting #content ul li{display: inline;} and adding the rule below. Live example: http://jsfiddle.net/tw16/5E7Ac/

#content ul li ul{
    float: left;
}

You may try with this instead

#content > ul > li {
    display: inline;
}

This way only the first <li> elements will receive the rule.

Edit

You may want to use float:left to achieve your result as shown in this fiddle.

It appears that AAA and BBB represent tabular data. Why not use a table?

<table>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
    <tr>
        <td>
            AAA
        </td>
        <td>
            BBB
        </td>
    </tr>
</table>

Tables still have their place in web development. They are not inherently evil.

#content ul{float:left; list-style:none;}
#content>ul li{float:left;} /*Only target fist-level li*/
#content li>ul>li{clear:both;}

This will display exactly what you try to acheive without using table.

Ordering content differently from how it appears in the source is a huge pain in the neck. You are probably better off with a table or a definition list where the AAA and BBB elements alternate. If that is not an option, you could use two fixed-width ul blocks floated to the left, with block li elements - depends on your design requirements (e. g. how much do the widths vary? should the elements line up vertically?)

Have you tried changing #content ul li to #content ul ul li, this should fix the problem.