Я играю с jsfiddle, и я пытаюсь центрировать (в моем случае, четыре) неупорядоченные списки в нижнем колонтитуле (который я часто вижу на веб-страницах в эти дни).
Как мне поиграть с краем и отступом, чтобы сделать эти неупорядоченные списки центрированными (равный край справа/слева от самого правого и левого <ul>
) и с равным дополнением между списками?
Код html:
<div class="mainContent">
<header class="header">
<h1>Header</h1>
</header>
<div class="content">
<p>Content...</p>
</div>
<footer class="footer">
<p> © 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%;
}
Я не совсем уверен, что то, что вы хотите достичь, во всех смыслах и целях, в виде сетки? это звучит так, как есть, и в этом случае.... вам нужна сетка :)
Вместо того, чтобы слишком усложнять и захватывать структуру сетки, из которых сотни, полезно знать, как работают сетки, поскольку вы можете напрямую применять эти знания к нижнему колонтитулу своего сайта.
Одна из лучших статей, с которыми я столкнулась, - "Не переусердствуйте с сетками". Http://css-tricks.com/dont-overthink-it-grids/
Если вы считаете свои четыре списка просто столбцами шириной 25%, половина вашей битвы будет выиграна. Неважно, будет ли ваш элемент контейнера пикселями или процентами, сетка, основанная на процентах, будет аккуратно находиться внутри.
Я редактировал ваш 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%;
}