如何设置列表的项目符号(li的点)与文字之间的距离

今天在上课过程中遇到了一个小问题,如何调整li的点与文字之间的距离,一般情况下,个人会去掉li自带的项目符号,单独做一个圆点,但今天特殊情况,没有做,所以就“逼迫”我去找到了一个属性可以很方便的去调整项目符号和文字之间的距离:text-indent:20px;此属性规定文本块中首行文本的缩进。

    <ul>
        <li>项目符号</li>
        <li>圆点</li>
        <li>与文字之间的距离</li>
    </ul>

这个是原来的样子在这里插入图片描述
下面我们就看一下调整后的样子
一、距离增大’

   ul li{
            text-indent: 20px;/*文字与点之间的距离是20px,距离明显增大*/
        }

这个是20px时的样子,距离明显增大
二、距离缩小

   ul li{
            text-indent: -5px;/*该属性取值可为负值,距离缩小*/
        }

这个是-5px时的样子,距离明显缩小
当然很多人会说利用padding-left也可以调整,但是,padding-left不允许负值,也就意味着,他的距离是有限的缩小。无论你是padding-left的值是-50px,还是-100px,它的表现都padding-left:0;的样子。
是不是又学到一手呢,高兴。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值