浮動後的 <li> 如何在 <ul> 中居中顯示？

百度了許久都沒有滿意的解決方案，現在終於搞定了。

其實，只要 ul 的父元素 css 樣式設了 text-align: center; 然後 ul 設了 display: inline-block; li 再設 display: inline; 就可以了。多簡單的事兒，我只要這個簡單的效果，但網上一堆複雜的亂七八糟的設置方法，表現得多高深似的卻也無法最終解決問題，最後突發奇想設一下發現得了。

 

html標籤

<div id="footer">
      <ul>
            <li>內容</li>
      </ul>
</div>

 

css樣式

#footer {
    text-align: center;
}
#footer ul {
    display: inline-block;
    overflow: auto;
}

#footer ul li {
    display: inline;
    float: left;
}