list displaying slightly off centered

问题

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!

Here is the 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>

here is the 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;
}

回答1:

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

#navlist {padding:0}

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

回答2:

Add this style

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

回答3:

I'm not a huge fan of putting spacers inside of my <li> elements. Normally if I need to do what you're trying to do, I use <p> tags instead. See my code below:

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

Preview: http://jsfiddle.net/Wexcode/Lb9XC/

来源：https://stackoverflow.com/questions/8622498/list-displaying-slightly-off-centered

标签

html

css

html-lists