广州网站建设

我们在进行网站建设时经常会遇到这样的问题，几个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，转摘请保留版权信息。