如何让这些无序列表彼此相邻？

Question

如何使用 css3 让这些列表（列表项 1 到 4 中的无序列表）彼此相邻？

这是我一直在使用的代码，我已经尝试了几种方法，但我似乎无法掌握它

<footer>

    <ul>
        <li>1</li>
            <ul>
                <li>Visie & Beleid</li>
                <li>Opbouw Studieprogramma</li>
                <li>Competenties</li>

            </ul>

        <li>2</li>
            <ul>
                <li>Mededelingen</li>
                <li>Uitagenda</li>
                <li>Propedeuse</li>

            </ul>

        <li>3</li>
            <ul>
                <li>Contact</li>
                <li>Blog</li>
                <li>Docenten</li>
                <li>Onderwijsbureau</li>

            </ul>


    </ul>
</footer>

Answer 1

您是否尝试将“内部”<ul>s 放入 div，然后将样式应用于 <div>s 以​​赋予它们宽度，然后将它们浮动到左侧？

类似于以下 jsfiddle：http://jsfiddle.net/msturdy/yJ2Kw/4/

我承认我不确定将 <div> 放在 <ul> 中是否是个好主意，但它在 Chrome 和 Firefox 中运行良好！

（编辑：更新链接以考虑在嵌套<ul> 之后关闭</li> 标签）