南宁网站建设技巧:使用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>
许多人可能会想到以下布局方法:
<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>
但是在实际效果中,如果把LIs定义为float:left,则不可能把UL的LI元素并列成一行后整体显示居中,LIs会一个一个的向左排列。
那么如何在使用float后使整个中心:左并排布局呢?关于企业建站,目前,较好的方法可能是使用display:inline而不是float:left,如下所示:
但是使用这种方法的缺点是无法定义LI的宽度,只能使用填充和边距来协调显示间距效果。
您有没有更好的方法将模块元素与浮动并排放置:左对齐?欢迎大家一起讨论。