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

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

我們在進(jìn)行網(wǎng)站建設時(shí)經(jīng)常會(huì )遇到這樣的問(wèn)題，幾個(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后，是無(wú)法使并列一行后的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)就是無(wú)法定義LI的寬度，只能使用padding跟margin來(lái)協(xié)調處理顯示間距效果。

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

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