百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>建站知识> 网站建设技巧:运用float:left并排布局后整体居中
分享文章到:

网站建设技巧:运用float:left并排布局后整体居中

发布时间:06/10 来源:未知 浏览: 关键词:
网站建设技巧:运用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并排布局后的模块元素整体居中吗?

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有153人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板