專業的廣州網站建設公司、廣州網站設計制作公司為您服務,電話:020-85548809,29883069
新聞中心
專業專注專心,行業行情行規
分享交流,永無止境,我們愿與您共同進步

網站建設技巧:使用float:left并排布局后整體居中

發布日期:[2014/11/24]   編輯:奇億廣州網站建設

我們在進行網站建設時經常會遇到這樣的問題,幾個DIV或LI模塊元素要求并排一行顯示后使其整體居中,如以下布局情況:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
可能很多人會想到以下布局方法:
<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>
但實際效果中,如果LI被定義了float:left后,是無法使并列一行后的LI元素在UL中整體顯示居中的,LI會一個個靠左排列。

那么如何才能讓使用了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>
但這樣使用后缺點就是無法定義LI的寬度,只能使用padding跟margin來協調處理顯示間距效果。

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

本文原創:廣州網站建設,地址:http://www.studstu.com/news/1048.html,轉摘請保留版權信息。

 

廣州建網站、廣州做網站
或者將本文《網站建設技巧:使用float:left并排布局后整體居中》收藏和分享到:
復制本文《網站建設技巧:使用float:left并排布局后整體居中》地址給好友:
最新国产精品精品视频_欧美色欧美亚洲日韩在线影院_色偷偷亚洲偷自拍视频