如何并排获取页脚

Question

我的页脚是一个在另一个之下，并希望它并排。我的问题是，你有什么建议如何以一个很好的方式是太多了？它不是网站最重要的一面，但内容很多，如何以正确的方式表达这一点？

                            <h1>Sitemap</h1>

                                <ul>
                                    <li>Opleiding</li>
                                        <ul>
                                            <li>Visie & Beleid</li>
                                            <li>Opbouw Studieprogramma</li>
                                            <li>Competenties</li>
                                            <li>Diploma</li>
                                            <li>Beroepen</li>
                                        </ul>

                                    <li>Onderwijsprogramma</li>
                                        <ul>
                                            <li>Mededelingen</li>
                                            <li>Uitagenda</li>
                                            <li>Propedeuse</li>
                                            <li>Verdieping 1</li>
                                            <li>Verdieping 2</li>
                                            <li>Afstuderen</li>
                                        </ul>

                                    <li>Organisatie</li>
                                        <ul>
                                            <li>Contact</li>
                                            <li>Blog</li>
                                            <li>Docenten</li>
                                            <li>Onderwijsbureau</li>
                                            <li>Stagebureau</li>
                                            <li>Buitenlandbureau</li>
                                            <li>Examencommissie</li>
                                            <li>Decaan</li>
                                        </ul>

                                    <li>Stages en Projecten</li>
                                        <ul>
                                            <li>Stages</li>
                                            <li>Projecten</li>
                                        </ul>
                                </ul>

                            <h1>Contact</h1>
                            CMD Amsterdam
                            Bezoekadres: Gebouw Theo Thijssenhuis (TTH), Wibautstraat 2-4, 1091 GM Amsterdam
                            Postadres: Postbus 1025, 1000 BA Amsterdam
                            Telefoon: 020 595 1855
                            Email: <a href="#">info@cmd.hva.nl</a>
                            RSS: <a href="#">Feed intranet</a>

                            <h1>Zoeken</h1>
                            <form>
                                <input type="text">
                                <input type="submit">
                            </form>

                            <h1>About</h1>
                            CMD Amsterdam is een ontwerp opleiding voor Interactieve Media.
                            Op de opleiding Communication & Multimedia Design (CMD) Amsterdam leer je alles over het ontwerpen van online interactieve media. Dit betekent begrijpen, bedenken en maken van interactieve mediatoepassingen zoals websites, mobiele applicaties en interactieve televisie. 

                            <h1>Credits</h1>
                            © 2007 Hogeschool van Amsterdam - DMCI - CMD Amsterdam
                            <a href="#">Geef ons feedback</a>
                        </footer>

CSS！

footer{
    width: 100%;
    position: absolute;
    top: 317%;
    left: -10%;
    background: lightgrey;
    margin:10%;
    padding: 2%;
}

Answer 1

footer > ul > li {
    width: 20%; /* Make them the right width */
    float: left; /* And float them to get them in a line */
}

Answer 2

你的页脚中有5个标题，所以我猜你的页脚中有5列。我会在每个页脚部分周围放一个div，然后浮动它们并约束它们的宽度，使它们并排显示。

HTML

<footer>
  <div class="footer-column">
    <h1>Sitemap</h1>
    ...
  </div>
  <div class="footer-column">
    <h1>Content</h1>
    ...
  </div>
  <div class="footer-column">
    <h1>Zoeken</h1>
    ...
  </div>
  <div class="footer-column">
    <h1>About</h1>
    ...
  </div>
  <div class="footer-column">
    <h1>Credits</h1>
    ...
  </div>
</footer>

CSS

.footer-column {
  width: 20%;
  float: left;
}

演示

JSFiddle（注意：在狭窄的显示屏上看起来很糟糕。）