巴中热线

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 1067|回复: 0

[网页教程] 如何让html特效的多个li排版居中于ul中间

[复制链接]
发表于 2019-9-3 05:17:22 | 显示全部楼层 |阅读模式

注册巴中热线论坛,交好友享优惠,衣食住行吃喝玩乐尽在 BZHOT.com

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
如何让html特效的多个li排版居中于ul中间

方法一:利用margin-left设置

比如侧边栏的div宽300px;我有四个li,每个设置height:30px;width:60px;并让这四个li位于侧边栏的头部;就可以设置ul的margin-left:80px;
这样就会使四个li居于中间;如果想使四个li之间有间隔。可以设置li的margin-left:5px;这样就需要改变先前ul的margin-left为(300-240-20)/2-2.5,因为margin-left是透明的,所以才会有上面这个计算式子。可见可能会出现小数,这样是我们要避免的。利用ul的margin-left很简单地设置居中。
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>li居中显示</title>
  6. <style>
  7. #diva{
  8. width:300px;
  9. height:300px;
  10. background-color: #00ff99;
  11. }
  12. #ula{
  13. display: table;
  14. margin-left: 50px;
  15. height:40px;
  16. text-align: center;
  17. padding:0;
  18. }
  19. .lia{
  20. float: left;
  21. margin-left: 5px;
  22. padding:0;
  23. width:50px;
  24. height:30px;
  25. line-height: 60px;
  26. font-size: 14px;
  27. background-color: yellow;
  28. list-style-type: none;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="diva">
  34. <ul id="ula">
  35. <li class="lia">11111</li>
  36. <li class="lia">22222</li>
  37. <li class="lia">33333</li>
  38. <li class="lia">44444</li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

在这个方法中,我们可以设置ul的高和宽,但只要不让ul的宽超过div的宽,以及不让ul的宽低于四个li的和的宽,就不会出现排版错误。

方法二:利用ul的text-align:center属性,好用有效
首先要说的是,设置ul的display:table,text-align:center。
是不是觉得好神奇,怎么会出现display:table,说实话,这也是我第一次用到这个属性,虽然知道有这个属性,但一般还真不用,我们似乎只用none,inline和block,但这里我们必须用这个属性,不然解决不了。下面是一段代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>li居中显示</title>
  6. <style>
  7. #div1{
  8. width:500px;
  9. height:500px;
  10. background-color: red;
  11. }
  12. #ul1{
  13. display: table;
  14. margin:0 auto;
  15. height:40px;
  16. text-align: center;
  17. padding:0;
  18. }
  19. .li1{
  20. float: left;
  21. margin-left: 5px;
  22. padding:0;
  23. width:70px;
  24. height:60px;
  25. line-height: 60px;
  26. font-size: 20px;
  27. background-color: yellow;
  28. list-style-type: none;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="div1">
  34. <ul id="ul1">
  35. <li class="li1">11111</li>
  36. <li class="li1">22222</li>
  37. <li class="li1">33333</li>
  38. <li class="li1">44444</li>
  39. </ul>
  40. </div>
  41. </body>
  42. </html>
复制代码

这段代码可以解决居中方法,注意:ul设为display:table;text-align:center;但记住千万千万不可以设置ul的宽,不然无法实现。



上一篇:让li在同一行只出现左右滚动条,滚动条透明,移动端就可以滑动
下一篇:linux系统计划任务设置方法详解,按时执行命令和脚本
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

巴中热线 - 精彩推荐上一条 /1 下一条

快速回复 返回顶部 返回列表