南宁网站建设技巧:使用float:left并排布局后整体居中!

2020-11-27 09:51:01 编辑:黑马网络 来源:本站原创

  南宁网站建立技巧:运用float:left并排规划后全体居中!在建网站的时分,我们常常会遇到这样的成绩。需求并排显示几个DIV或LI模块元素,以便它们可以作为一个全体居中,例如以下规划:

南宁网站建设技巧:使用float:left并排布局后整体居中!

       <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>

南宁网站建设技巧:使用float:left并排布局后整体居中!

  但是在实践效果中,假如把LIs定义为float:left,则不能够把UL的LI元素并列成一行后全体显示居中,LIs会一个一个的向左陈列。

  那么如何在运用float后使整个中心:左并排规划呢?关于企业建站,目前,较好的办法能够是运用display:inline而不是float:left,如下所示:

  但是运用这种办法的缺陷是无法定义LI的宽度,只能运用填充和边距来协调显示间距效果。

  您有没有更好的办法将模块元素与浮动并排放置:左对齐?欢送大家一同讨论。

 


本站文章均为黑马网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,我们谢绝直接复制和抄袭!感谢...
我们猜你喜欢