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底部的那个？

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;。

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;
}

Answer 3

如果你看一下他们的代码，你真正需要的就是

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

将应用于第一个 ul的{{1}}

小提琴：http://jsfiddle.net/jzpcW/

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

3 个答案: