html - CSS:在页面中居中 元素并彼此相邻？

Question

我正在尝试居中 <li>页面中的元素和彼此相邻的元素没有任何运气!

我从display:table;开始尝试了各种方法至 magin:0 auto;和 display:block;和 display:inline-block;等等……不幸的是，似乎没有任何效果。

为了解释这一点，我创建了这个 JSFIDDLE

请展开该 fiddle 的 HTML 部分以查看正常模式下的菜单项(绿色条)。

我一直在搞乱的CSS代码是这部分:

nav {
    /*position: absolute;
    top: 0;
    right: 5px;*/

}
nav li {
    float: left;

    display: inline-block;
}
nav li a {
    font-size: 11px;
    color: #9aa6af;
    padding: 24px 15px;

    display: block;
}
nav li a:hover {color: #000;}

有人可以就这个问题提出建议吗？

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

basicly you can do :

nav {
    /*position: absolute;
    top: 0;
    right: 5px;*/
  text-align:center

}
nav li {    
    display: inline-block;
}

Float 杀死display 并且不能居中