Как я могу центрировать неупорядоченные списки в нижнем колонтитуле?

0

Я играю с jsfiddle, и я пытаюсь центрировать (в моем случае, четыре) неупорядоченные списки в нижнем колонтитуле (который я часто вижу на веб-страницах в эти дни).

Как мне поиграть с краем и отступом, чтобы сделать эти неупорядоченные списки центрированными (равный край справа/слева от самого правого и левого <ul>) и с равным дополнением между списками?

JSfiddle здесь!

Код html:

<div class="mainContent">
    <header class="header">
        <h1>Header</h1>
    </header>
    <div class="content">
        <p>Content...</p>
    </div>
    <footer class="footer">
        <p> &copy Footer</p>
        <hr>
        <div class="footerLists">
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </footer>
</div>

Код CSS:

    .mainContent {
        width: 80%;
        margin: 0 auto;
    }

    .header {
        border: 2px solid red;
    }

    .content {
            border: 2px solid red;
    }

    .footer {
        height: 200px;
        border: 2px solid red;
    }

    .footer ul {
        float: left;
        list-style: none;
    }

    .footer hr {
        width: 80%;
    }

    .footerLists {
        width: 80%;
    }
  • 0
    это, вероятно, вещь «margin: 0 auto» в footerLists, но вам, возможно, придется поработать с обертками, чтобы заставить ее работать. Или установите «display: table», что-то в этом роде. Я бы попробовал, но я иду спать
Теги:
css-position

2 ответа

1
Лучший ответ

Я не совсем уверен, что то, что вы хотите достичь, во всех смыслах и целях, в виде сетки? это звучит так, как есть, и в этом случае.... вам нужна сетка :)

Вместо того, чтобы слишком усложнять и захватывать структуру сетки, из которых сотни, полезно знать, как работают сетки, поскольку вы можете напрямую применять эти знания к нижнему колонтитулу своего сайта.

Одна из лучших статей, с которыми я столкнулась, - "Не переусердствуйте с сетками". Http://css-tricks.com/dont-overthink-it-grids/

Если вы считаете свои четыре списка просто столбцами шириной 25%, половина вашей битвы будет выиграна. Неважно, будет ли ваш элемент контейнера пикселями или процентами, сетка, основанная на процентах, будет аккуратно находиться внутри.

  • 0
    Спасибо за эту ссылку. Я думаю, что это то, что я хочу, 4 раздела, 25% из которых родительские. :)
0

Я редактировал ваш jsfiddle. пожалуйста, проверьте следующий код:

.mainContent {
 width: 80%;
 margin: 0 auto;
 text-align:center;
}

.header {
 border: 2px solid red;
}

.content {
    border: 2px solid red;
}

.footer {
 height: 200px;
 border: 2px solid red;
}

.footer ul {
 float: left;
 list-style: none;
 width: 80%;
}

.footer hr {
 width: 80%;
}

.footerLists ul {
 width:13%;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню