css - 尝试使用 css 制作页脚站点地图(页脚由 ul li 制作)

Question

我希望它看起来像这样:

http://i.stack.imgur.com/eO1dZ.gif

我一直在尝试一些不同的东西，但似乎没有什么能像图片那样使它成为整洁的水平列表。有人可以帮帮我吗？

  <!-- Footer informatie -->
    <footer>
        <section id="sitemap">
            <h2>Sitemap</h2>
            <ul>
                <li>
                    <a href="#">Opleiding</a>
                    <ul>
                        <li><a href="#">Visie &amp; Beleid</a></li>
                        <li><a href="#">Opbouw Studieprogramma</a></li>
                        <li><a href="#">Competenties</a></li>
                        <li><a href="#">Diploma</a></li>
                        <li><a href="#">Beroepen</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Onderwijsprogramma</a>
                    <ul>
                        <li><a href="#">Mededelingen</a></li>
                        <li><a href="#">Uitagenda</a></li>
                        <li><a href="#">Propedeuse</a></li>
                        <li><a href="#">Verdieping 1</a></li>
                        <li><a href="#">Verdieping 2</a></li>
                        <li><a href="#">Afstuderen</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Organisatie</a>
                    <ul>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Docenten</a></li>
                        <li><a href="#">Onderwijsbureau</a></li>
                        <li><a href="#">Stagebureau</a></li>
                        <li><a href="#">Buitenlandbureau</a></li>
                        <li><a href="#">Examencommissie</a></li>
                        <li><a href="#">Decaan</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Stages en Projecten</a>
                    <ul>
                        <li><a href="#">Stages</a></li>
                        <li><a href="#">Projecten</a></li>
                    </ul>
                </li>
            </ul>
        </section>

到目前为止我的 CSS:

#sitemap li {
list-style-type:none; 
display: inline-block;
border: 2px solid;
}

内联 block 应该使它水平，但它没有...我做错了什么？

x

Answer 1

通过使用 #sitemap li，您可以定位 #sitemap 元素内的每个 li，而实际上您只想定位包含的 li。

您可能想改用它:

#sitemap > ul > li {
    display: inline-block;
    list-style-type:none;
    border: 2px solid;
}