终于实现了让ul里面的li水平居中 如何让li在ul中水平居中 li的宽度任意设置

本文介绍了一种使用CSS实现UL内LI元素任意宽度且始终保持水平居中的方法。关键是通过设置ul的display属性为table,并结合margin:0 auto来实现水平居中效果。此外,还利用了浮动使LI元素横向排列。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实现li的宽度任意设置,总是在ul中水平居中,实现结果:
在这里插入图片描述
在这里插入图片描述
关键一点就是给ul设置display:table;
上代码:

css样式:
	* {/*重置样式*/
            margin: 0;
            padding: 0;
            list-style: none;
            color: #fff;
            text-decoration: none;
        }
        .wrapper {
            background: #008c8c;
            border: 1px solid #000;
        }
        .wrapper ul {
            display: table;		 /*这里是关键步骤:*/
            margin: 0 auto;      /*让ul在div中水平居中 */
            border: 1px solid #f00;
        }
        .wrapper ul::after {     /*清除浮动 */
            content: '';
            display: inline-block;
            clear: both;
        }
        .wrapper ul li {
            float: left;         /*让li浮动起来 横向排列*/
            text-align: center;  /*让li在ul中水平居中*/
            height: 40px;
            line-height: 40px;   /*垂直居中*/
            width: 250px;        /*任意设置li的宽度,不设置宽度的话也可以设置padding*/
        }

htmlCode:

 <div class="wrapper">
        <ul>
            <li><a href="">li宽度任意均可居中</a></li>
            <li><a href="">li宽度任意均可居中</a></li>
            <li><a href="">li宽度任意均可居中</a></li>
            <li><a href="">li宽度任意均可居中</a></li>
            <li><a href="">li宽度任意均可居中</a></li>
        </ul>
    </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值