剩余浮点时将LI居中对齐

Question

Folllowing is my jsfiddle in which I am trying to center align the list items <li> into <ul> . Only problem is lis are set to float left and I can not remove this condition . Kindly let me know is there a way to tackle float left and make lis center aligned generically (in responsive manner)?

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

Why not simply add:

#nav ul{
    display:inline-block;
}

Answer 2

Try like this: DEMO

CSS:

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