我在这里有这个清单:
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 auto,但它没有做任何事情,这是我的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; }
解决方法
on .footer-location ul li use display:inline-block;而不是浮动:左;
.footer-location ul li { display:inline-block; color: #808080; padding-bottom: 3px; font-size: 12px; font-family: Arial,sans-serif; padding-right: 10px; }