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>放入div中，然后将样式应用于<div>以赋予它们宽度，然后将它们浮动到左侧？

类似下面的jsfiddle：http://jsfiddle.net/msturdy/yJ2Kw/4/

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

（编辑：更新后的链接，以考虑在嵌套</li>之后关闭<ul>代码

Answer 2

你需要将你想要的列表项的显示属性设置为内联，如下所示：

ul ul li { display: inline; }

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

2 个答案: