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

Question

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

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

JSfiddle here!

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

Answer 1

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

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

Одна из лучших статей, с которыми я столкнулся, это «Не overthink это сетках» http://css-tricks.com/dont-overthink-it-grids/

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

Answer 2

Я отредактировал ваш 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%; 
}