列表显示略偏离中心 [英] list displaying slightly off centered

问题描述

我似乎无法弄清楚为什么我的列表显示略偏离中心。我在它下面有一些文本在100％居中的同一个容器中，但列表似乎从左侧略微填充。我是CSS的新手，所以也许有人可以指出我出错的地方。非常感谢！

I can't seem to figure out why my list is displaying slightly off center. I have some text below it in the same container that is 100% centered but the list seems to be padded slightly form the left. I am a novice at CSS, so perhaps someone can point where I've gone wrong. Much appreciated!

这里是HTML

<div id="footer_menu">
<ul id="navlist">
<li><a href="#">HOME</a></li>
<li>|</li>
<li><a href="#">ABOUT</a></li>
<li>|</li>
<li><a href="#">ARCHIVE</a></li>
<li>|</li>
<li><a href="#">GET INVOLVED</a></li>
<li>|</li>
<li><a href="#">BLOG</a></li>
<li>|</li>
<li><a href="#">CONTACT</a></li>
</ul>
<font style="font-family:Arial, Helvetica, sans-serif; font-size:10px">ALL CONTENT PRODUCED BY <img src="images/dblzerofilms.jpg" width="190" height="13" /> COPYRIGHT 2011</font>
</div>

这里是CSS

#footer_menu{
    position: relative;
    height: 75px;
    width: 1023px;
    bottom: 150px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
}
#footer {
    height:75px;
    width:1024px;
    background-image: url(images/footer_img.jpg);
    position: relative;
    bottom: 0px;
}
#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 5px;
    font-size: 11px;
}
#navlist li a
{
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    font-weight: lighter;
    font-size: 11px;
}

推荐答案

将以下代码行添加到您的CSS规则中：

All you need to do is add the following line to your CSS rule:

#navlist {padding:0}

并且将删除您拥有的额外左填充。我试图用简化的css代码（比如页边距和字体）修复你的css代码，希望对你有帮助：

and that will remove that extra left padding that you have. I tried to fix your css code a little bit using shorthand css lines (i.e. margin and font), hope that helps:

#footer_menu{
    height:75px;
    margin:0 auto;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000;
}
#footer {
    height:75px;
    width:1024px;
    background-image: url('images/footer_img.jpg');
}
#navlist {padding:0}
#navlist li {
    display:inline;
    list-style-type:none;
    padding-right:5px;
    font-size:11px;
}
#navlist li a {
    font:lighter 11px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
}    

这篇关于列表显示略偏离中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！