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

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

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

这个是原来的样子如何设置列表的项目符号(li的点)与文字之间的距离_第1张图片
下面我们就看一下调整后的样子
一、距离增大’

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

如何设置列表的项目符号(li的点)与文字之间的距离_第2张图片
二、距离缩小

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

如何设置列表的项目符号(li的点)与文字之间的距离_第3张图片
当然很多人会说利用padding-left也可以调整,但是,padding-left不允许负值,也就意味着,他的距离是有限的缩小。无论你是padding-left的值是-50px,还是-100px,它的表现都padding-left:0;的样子。
是不是又学到一手呢,高兴。

你可能感兴趣的:(css,项目符号,ul,li,文字距离)