列表显示略微偏离中心答案

【问题标题】：list displaying slightly off centered列表显示略微偏离中心
【发布时间】：2012-01-27 04:39:08
【问题描述】：

我似乎无法弄清楚为什么我的列表显示的有点偏离中心。我在它下面有一些文本，在同一个容器中，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;
}

【问题讨论】：

在语义上，我通常喜欢使用text-transform: uppercase，而不是在 HTML 中将文本全部大写。
另外，包含多个单词的 CSS 类通常用连字符连接，而不是下划线。
尝试#navlist { 宽度：1024px;边距：0 自动； }
这不是我看到的真正的字体标签是吗？ :)
把管道放在一个里不是最好的。使用边框或 ::after 的伪元素。

标签： html css html-lists

【解决方案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;
}

【讨论】：

这是最接近的。就像在 ul#navlist 中添加 0 填充和 0 边距一样简单

【解决方案2】：

添加此样式

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

【讨论】：

【解决方案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/

【讨论】：