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

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

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

这个是原来的样子
下面我们就看一下调整后的样子
一、距离增大’

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

二、距离缩小

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

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

如何设置列表的项目符号（li的点）与文字之间的距离相关推荐

如何修改无序列表li的点和文字之间的距离？
将list-style-position属性设置为outside 才可以然后使用 text-indent 如果用inside就会前缀跟着一起动如果需要对整坨的间距都调整对外层调整即可
CSS中将无序列表的项目符号改为指定图片
一.将无序列表的项目符号改为指定图片二.将无序列表的项目符号默认的圆点改为方块 HTML <ul><li>Humous</li><li>Pitta&l ...
CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
html项目符号正方形,HTML无序列表| HTML项目符号列表
本文概述 HTML无序列表或项目符号列表以项目符号格式显示元素.我们可以使用无序列表, 而无需按任何特定顺序显示项目. HTML ul标签用于无序列表.项目符号列表可以有4种类型: 碟片圈广场没 ...
添加项目符号时，发现后面文字缩进很多
问题描述今天下午在修改简历的时候,当我添加项目符号时,发现后面文字移进很多,而且减小缩进量也没有用如下图所示图1 解决方案: 在添加项目符号的前提下,选中该段落,然后右击,选择调整列表缩进,将 ...
php css下划线,css下划线与文字之间的距离如何设置？
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容. 在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会 ...
第2章第21节：使用项目符号修饰段落中的文字内容 [PowerPoint精美幻灯片实战教程]
项目符号和项目编号的作用相似,都是放在段落的开头,用来修饰段落中的文字内容.不同之处是,项目符号主要用于修饰没有顺序关系的内容. 点击项目符号图标,给所选文字添加项目符号. 此时在每个段落的开头,都显 ...
Android EditText组件drawableLeft属性设置的图片和hint设置的文字之间的距离
有的时候,我们需要在文本框里放置icon图片,并且设置默认提示文字的时候,需要设置两者之间的间距,如下图: 这里想设置的就是之前的手机icon和"请输入手机号"之间的距离,则可是使 ...
html列表圆点改色,在不使用span的情况下更改HTML列表的项目符号颜色
我们可以结合list-style-image使用svgS,我们可以在CSS内联!这种方法提供了令人难以置信的"子弹"控制,它可以成为任何东西. 要获得一个红色圆圈,只需使用以下cs ...

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

如何设置列表的项目符号（li的点）与文字之间的距离相关推荐

最新文章

热门文章