当剩下Float时，居中对齐LI

Question

Folllowing是我的jsfiddle，我试图将列表项<li>居中对齐到<ul>。 唯一的问题是lis设置为向左浮动，我无法删除此条件。请告诉我有没有办法解决浮动问题并使lis中心对齐（以响应方式）？

http://jsfiddle.net/AqRJA/2/

#nav{
    text-align: center;
    line-height:30px;
}

#nav li {
    float: left;
}

#nav li {
    list-style:none;
    margin: 0 5px;
    display:inline;
    border:gray solid 1px;
}

Answer 1

Demo Fiddle

为什么不简单地添加：

#nav ul{
    display:inline-block;
}

Answer 2

请尝试以下操作： DEMO

CSS：

#nav ul {
    margin:0 auto;
}
#nav li {
    list-style:none;
    margin: 0 5px;
    display:inline-block;
    border:gray solid 1px;
}