網(wǎng)站建設(shè)技巧：使用float:left并排布局后整體居中

發(fā)布日期：[2014/11/24] 編輯：奇億廣州網(wǎng)站建設(shè)

我們?cè)谶M(jìn)行網(wǎng)站建設(shè)時(shí)經(jīng)常會(huì)遇到這樣的問題，幾個(gè)DIV或LI模塊元素要求并排一行顯示后使其整體居中，如以下布局情況：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
可能很多人會(huì)想到以下布局方法：
<ul style="width:100px;text-align:center">
<li style="float:left;width:10px;"></li>
<li style="float:left;width:10px;"></li>
<li style="float:left;width:10px;"></li>
</ul>
但實(shí)際效果中，如果LI被定義了float:left后，是無法使并列一行后的LI元素在UL中整體顯示居中的，LI會(huì)一個(gè)個(gè)靠左排列。

那么如何才能讓使用了float:left并排布局后再整體居中呢？目前或許最好的辦法還是使用display:inline替代float:left，如下：
<ul style="width:100px;text-align:center">
<li style="display:inline;padding:5px;margin:5px;"></li>
<li style="display:inline;padding:5px;margin:5px;"></li>
<li style="display:inline;padding:5px;margin:5px;"></li>
</ul>
但這樣使用后缺點(diǎn)就是無法定義LI的寬度，只能使用padding跟margin來協(xié)調(diào)處理顯示間距效果。

你有什么更好的辦法讓使用float:left并排布局后的模塊元素整體居中嗎？

本文原創(chuàng)：廣州網(wǎng)站建設(shè)，地址：http://www.studstu.com/news/1048.html，轉(zhuǎn)摘請(qǐng)保留版權(quán)信息。