Question

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>
                                <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.

Answer 1

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/