CSS 嵌套列表到多列

Question

我想在列中显示嵌套列表，这在页脚中经常使用。

<ul>
    <li>
        Header 1 
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </li>
    <li>
        Header 2 
        <ul>
            <li>Item 1.2</li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

我希望结果看起来像这样:

Header 1         Header 2
Item 1           Item 1.2
Item 2           Item 2.2

我一直在玩 display:inline 和 display:block 一段时间，但无法正确显示。

Answer 1

这是一个使用“哦，太酷了”显示的解决方案:inline-block； http://jsfiddle.net/b9MWz/4/

ul{
   padding: 0;
   list-style: none; /*remove bullets*/
}

ul li{    
   display: inline-block;
    width: 20%; /*or whatever unit*/

}

ul li ul, ul li ul li{
    display: static;
    width: 100%;

}

和一个使用 float 的解决方案: http://jsfiddle.net/8F8Uy/3/

ul{
    padding: 0;
    list-style: none; /*remove bullets*/
}

ul li{    
    float: left;
    width: 20%; /*or whatever unit*/

}

ul li ul, ul li ul li{
    float: none; /* un-"float" */
    width: 100%;

}