CSS список центр уль

Question

У меня есть этот список здесь: jsfiddle

<div class="footer-location"> 
    <ul> 
     <li>123 Fake St.</li> 
     <li>Toronto, Ontario, Y1Y 1Y1</li> 
     <li>416-555-5555</li> 
     <li><a href="mailto:info@email.com">info@email.com</a></li> 
    </ul> 
</div> 

И я пытаюсь сосредоточить весь список, я попытался установить ширину и установить маржу до 0 авто, но did't сделать что-нибудь , вот мой CSS код:

.footer-location { 
    float: left; 
    width: 100%; 
    padding-right: 20px; 
    padding-left: 25px; 
    margin: 0 auto; 
    text-align: center; 
} 

.footer-location ul { 
    list-style: none; 
} 

.footer-location ul li { 
    color: #808080; 
    padding-bottom: 3px; 
    font-size: 12px; 
    font-family: Arial, Helvetica, sans-serif; 
    float: left; 
    padding-right: 10px; 
} 

Answer 1

на .footer-location ul li использование display:inline-block; вместо float:left;

.footer-location ul li { 
display:inline-block; 
color: #808080; 
padding-bottom: 3px; 
font-size: 12px; 
font-family: Arial, Helvetica, sans-serif; 
padding-right: 10px; 
} 

DEMO:http://jsfiddle.net/pfW2v/2/

Answer 2

вам не нужен Div обертку, сделать литиево футер. избегать селекторов deslevat 'ul li', использовать дочерние селекторы, если вы можете 'ul> li'. его более Effient

Я думаю, что вы можете снять колонтитул только с этим:

fiddle HTML:

  <ul class="footer-location"> 
       <li>123 Fake St.</li> 
       <li>Toronto, Ontario, Y1Y 1Y1</li> 
       <li>416-555-5555</li> 
       <li><a href="mailto:info@email.com">info@email.com</a></li> 
      </ul> 

CSS:

.footer-location { 
width: 100%; 
text-align: center; 
list-style: none; 
} 

.footer-location > li { 
color: #808080; 
font-size: 12px; 
font-family: Arial, Helvetica, sans-serif; 
display:inline-block; 
padding: 0 5px 3px 0; 
}