Question

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

这是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;
}

Answer 1

您需要做的就是在CSS规则中添加以下行：

#navlist {padding:0}

这将删除你拥有的额外左边距。我尝试使用速记css线（即边距和字体）修改你的css代码，希望有所帮助：

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

Answer 2

添加此款式

#navlist
{
   clear: left;
    padding: 0;
}

Answer 3

我不喜欢将间隔物放在我的<li>元素中。通常，如果我需要执行您要执行的操作，我会使用<p>标记。请参阅下面的代码：

HTML：

<div id="footer-menu">
    <p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Archive</a> | <a href="#">Get Involved</a> | Blog | <a href="#">Contact</a></p>
    <p>All content produced by <img src="images/dblzerofilms.jpg" width="190" height="13" /> Copyright 2011</p>
</div>

CSS：

#footer-menu {
    font: 11px/1 Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #000; }
#footer-menu a {
    text-decoration: none;
    color: #000;
    margin: 0 5px;
    display: inline-block; }

预览：http://jsfiddle.net/Wexcode/Lb9XC/

列表显示略微偏离中心

3 个答案: