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

Question

我已经尝试了数个小时，试图弄清楚如何使用CSS和UL/LI创建类似www.telia.dk（底部）的页脚站点地图。

作为一个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下面的那个？

- MojoDK

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演示

请注意，这不是可以直接在生产中使用的内容，它肯定无法在IE6/7中工作。您可以在Quirksmode的兼容性表格中找到很好的兼容性表格。

与display：inline-block;不同，您还可以考虑使用浮动。

- kapa

---

太棒了！谢谢。完美！！！我就是喜欢这个网站和你们！ :) 我已经苦苦挣扎了几个小时，而你们在几分钟内完美地回答了我的问题！我真的很感激！谢谢。 - MojoDK

Answer 2

你的意思是类似这个this demo fiddle的东西吗？

HTML:

<div id="footer">
    <ul>
        <li>
            <ul>
                <li>Color</li>
                <li>Red</li>
                <li>Blue</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Fruit</li>
                ...

CSS：

#footer ul {
    list-style: none;
}
#footer>ul>li {
    float: left;
    width: 120px;
}
#footer ul li ul li:first-child {
    font-weight: bold;
}

- NGLN

Answer 3

如果你看他们的代码，你真正需要的只有

ul > li {
    float:left;
    width:140px;
}

这将应用于第一个 ul 的 li

fiddle: http://jsfiddle.net/jzpcW/

- kei