css - 如何拉伸(stretch)顶部导航以适应页面容器宽度

Question

我是编码方面的新手，所以请放轻松 ;)

我正在尝试使该网站的顶部导航栏拉伸(stretch)以适应我所理解的网站“容器”的宽度，即 900 像素宽。我这辈子都无法删除导航左侧和右侧的填充或边距。请参阅下面的代码。

网站截图在这里:http://img560.imageshack.us/img560/9479/237c.png

现在我只是巧妙地调整 padding 以使导航在页面上居中，但最终如果它像其他所有内容一样与容器的边缘相遇，它看起来会好得多。

感谢任何帮助。

/* Navigation
--------------------------------------------------------------------------------*/


#topnav {
    clear: both;
    margin: 0 0;
    overflow: hidden;
}

#topnav ul {
    list-style: none;
    float: left;
    text-align: center;
}

#topnav ul li {
    list-style: none;
    float: left;
    background: url(nav-sep.png) right 0px no-repeat;
    padding: 15px 0px 12px 0px;
    display: inline block;
}

#topnav ul > li:last-child,
#topnav ul > span:last-child li {
    background: none;
    padding-right: 0;
}

#topnav a {
    float: left;
    display: block;
    color: #545454;
    font-family: Blair, sans-serif;
    font-weight: 500;
    padding: 6px 0 6px;
    border: 0;
    border-top: 3px solid transparent;
    outline: 0;
    margin: 0 16.6px;
    list-style-type: none;
    font-size: .75em;
    text-transform: uppercase;
}

#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
    margin-right: 0;
}

#topnav li#active a,
#topnav a:hover {
    color: #666666;
    border: 0;
    border-top: 3px solid #8cc640;
}

Answer 1

试试

    margin-left:auto;
    margin-right:auto;

另见:

Cross browser method to fit a child div to its parent's width

希望这对您有所帮助。干杯。