html - 如何使用 UL 制作水平站点地图？

Question

我已经尝试了几个小时，想弄清楚如何制作页脚站点地图，就像在这个网页中一样 www.telia.dk (在底部)使用 CSS 和 UL/LI。

我是 CSS 菜鸟，所以请帮助我。

这是一个示例树...

<ul>
    <li>
        <ul>
            <li>Color/li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Fruit</li>
            <li>Apple</li>
            <li>Banana</li>
            <li>Lemon</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Weekdays</li>
            <li>Monday</li>
            <li>Friday</li>
            <li>Saturday</li>
        </ul>
    </li>
    <li>
        <ul>
            <li>Numbers</li>
            <li>1</li>
            <li>2</li>
        </ul>
    </li>
</ul>

任何想法如何使我上面的 UL 看起来像 www.telia.dk 底部的那个？

Answer 1

一种可能的方式是这样的(.hMenu 是外面的ul):

.hMenu > li { /* for direct childs (>) of .hMenu that are li-s */
    /* inline-block will make them inline but also block - the best of both :) */
    display: inline-block; 
    /* they will align themselves to each other's top */
    vertical-align: top; 
    /* just a little horizontal margin */
    margin: 0 10px; 
}
.hMenu ul li:first-child { /* for the first li-s in inner ul-s */
     /* we make them bold */
     font-weight: bold; 
}

jsFiddle Demo

请注意，这不是可以在生产中轻松使用的东西，它肯定不会在 IE6/7 中工作。你可以找到很棒的 compatibility tables on Quirksmode .

除了 display: inline-block;，您还可以考虑使用 float 。