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

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/

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

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

Answer 2

您需要将您希望彼此相邻的列表项的显示属性设置为内联，如下所示：

ul ul li { display: inline; }