贝博竞彩app热线

?找回密码
?立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 122|回复: 0
打印 上一主题 下一主题

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

[复制链接]
跳转到指定楼层
楼主
发表于 2019-9-3 05:17:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

注册贝博竞彩app热线论坛,交好友享优惠,衣食住行吃喝玩乐尽在 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. li居中显示





    • 11111

    • 22222

    • 33333

    • 44444




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

    方法二:利用ul的text-align:center属性,好用有效
    首先要说的是,设置ul的display:table,text-align:center。
    是不是觉得好神奇,怎么会出现display:table,说实话,这也是我第一次用到这个属性,虽然知道有这个属性,但一般还真不用,我们似乎只用none,inline和block,但这里我们必须用这个属性,不然解决不了。下面是一段代码:




    1. li居中显示





      • 11111

      • 22222

      • 33333

      • 44444




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



    上一篇:让li在同一行只出现左右滚动条,滚动条透明,移动端就可以滑动
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    贝博竞彩app热线 - 精彩推荐上一条 /1 下一条

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