ul的li float后居中的问题

ul li 水平排列并居中是一个常常会遇到的布局。
经常作为菜单栏、导航栏、tap标签栏等等。
虽然li float可以实现，但都比较麻烦，并且因为浮动了稍有不注意可能会影响布局，所以今天介绍个比较简单的方法。
display:inline-block 方法
将li display:inline-block， 并且在ul 上用text-align 既可以实现水平排列并居中。

/* css */
*{
            margin: 0;
            padding: 0;
        }
        #div1{
            margin: 0 auto;
        }
        #div1,#div1 ul{
            text-align: center;
            width: 500px;
        }
        #div1 ul li{
            display: inline-block;
            border: 1px solid black;
        }

/* html*/
<div id="div1">
        <ul style="background-color:#eee;">
            <li>首页</li>
            <li>导航</li>
            <li>详情</li>
        </ul>
    </div>