网站建设技巧:运用float:left并排布局后整体居中
我们在进行网站建设时经常会碰到这样的题目,几个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并排布局后的模块元素整体居中吗?