关于浮动列表项绝对居中的方法

    在页面布局中，我们常需要将列表项浮动在一行显示，如下图所示，

那么我们是如何调整让列表项水平局中呢，通常做法是通过调整列表项li的margin和padding使其水平居中显示，但是这样做有一个弊端，一旦屏幕大小发生变化，则列表项将不再居中，这里提供一种水平方向绝对居中的方法，

<div class='list-box'>
        <ul class='list'>
                <li>天龙八部</li>
                <li>神雕侠侣</li>
                <li>笑傲江湖</li>
                <li>雪山飞狐</li>
        </ul>
</div>
 
.list-box{
        text-align:center;
}
.list{
        display:inline-block;
}
.list li{
        float:left;
}

此时列表项li在水平方向将绝对居中