Как мне сделать горизонтальную карту сайта, используя UL? - PullRequest
Новая
       2

Как мне сделать горизонтальную карту сайта, используя UL?

3 голосов
/ 29 июня 2011

Я часами пытаюсь понять, как сделать карту сайта нижнего колонтитула, как на этой веб-странице 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 ?

Ответы [ 3 ]

6 голосов
/ 29 июня 2011

Один из возможных способов - что-то вроде этого (.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. Вы можете найти отличные таблицы совместимости в Quirksmode .

Вместо display: inline-block; вы также можете использовать поплавки.

0 голосов
/ 29 июня 2011

Если вы посмотрите на их код, все, что вам действительно нужно, это 

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

, который должен применяться к first ul s li

скрипка: http://jsfiddle.net/jzpcW/

0 голосов
/ 29 июня 2011

Вы имеете в виду что-то вроде этой демонстрационной скрипки ?

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