html - 无法居中导航菜单并且无法在项目之间获取分隔线

Question

我在其他所有内容下将导航菜单居中时遇到了一些麻烦，而且分隔线也没有位于两个菜单项之间的中心。

CSS

    .center{
    width: 450px;
    height: 500px;
    /*margin: 0 auto;
    display: block;
    position:relative;*/
    position:absolute;
    left:50%;
    top:50%;
margin-left:-225px;
margin-top:-250px;}



#navbar {

    padding:0;
    margin-left: 0 auto;
    margin-right: 0 auto;}

#navbar li {
    float: left;
    list-style:none;
    width: 100px;}

#navbar a{
    text-decoration:none;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    padding: 0;}

#navbar li + li {
    background: url('separator.gif') no-repeat top left;
}

这是http://jsfiddle.net/elroyz/GPgPF/

Answer 1

而不是浮动你的navbar limake 它们display:inline-block：

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}

http://jsfiddle.net/GPgPF/3/

Answer 2

把你的css改成这样：

#navbar {
    width: 100%;
    padding:0;
}

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}