我一直在网上四处寻找,看不出我的列表不居中的原因
这是html
<div id="footer" class="clear">
<ul id="nav2">
<li><a href="#">CONTACT</a></li>
<li><a href="https://www.facebook.com/tcstrathclyde?ref=ts&fref=ts"><img src="images/facebook.png" /></a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
<div class="copyright"> Copyright 2013 Teen Challenge Strathcylde. All rights reserved. Charity No: SC022209</div>
</div><!--footer-->
和CSS
#footer {
width: 960px; height: 100px; margin: 0 auto;
}
#footer ul#nav2 {
list-style: none; margin: 18px auto;
}
#footer ul#nav2 li {
float: left; padding: 0 0 0 30px; margin: 0 100px 0 0;
}
#footer ul#nav2 a img {position:relative; bottom:10px; }
#footer ul#nav2 li:first child { background:none; }
#footer ul#nav2 li a {
font-size: 30px; color: #222930; font-family:Tahoma, Geneva, sans-serif; text-decoration: none;
}
#footer ul#nav2 li a:hover, #header ul#nav1 li a:active {
color: #e9e9e9;
}
任何帮助将不胜感激谢谢:)
最佳答案
试试这个 CSS
#footer {
width: 960px;
height: 100px;
margin: 0 auto;
text-align: center;
}
#footer ul#nav2 {
list-style: none;
padding: 0;
}
#footer ul#nav2 li {
display: inline-block;
margin: 0 10px;
width: 150px;
}
#footer ul#nav2 a img {
position:relative;
bottom:10px;
}
#footer ul#nav2 li:first child {
background:none;
}
#footer ul#nav2 li a {
font-size: 30px;
color: #222930;
font-family:Tahoma, Geneva, sans-serif;
text-decoration: none;
}
#footer ul#nav2 li a:hover, #header ul#nav1 li a:active {
color: #e9e9e9;
}
关于html - ul 列表不在屏幕中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16217052/