失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html中多行div缩进 css自动换行缩进

html中多行div缩进 css自动换行缩进

时间:2019-04-30 17:24:45

相关推荐

html中多行div缩进 css自动换行缩进

好久没写关于介绍css文章了,今天处理页面页面的时候正好碰到了一个知识点,就顺便来一发。

css自动换行缩进,应用场景一般是对于列表信息遇到的比多。比如,我要实现一个我网站的简介列表,如下的代码。

网站:求索网站长:chenxing域名:主旨:专注WEB开发,分享经验,沉淀知识,求索新技术技术交流群:157451741

页面效果:

上面的主旨那一项换行了顶到前面,影响阅读和美观。我希望缩到“:”后面,使一眼看上去属于主旨那一项。代码处理如下:

网站:求索网站长:chenxing域名:

主旨:专注WEB开发,分享经验,沉淀知识,求索新技术

技术交流群:157451741

页面效果图:

ok,实现想要的结果。总结,处理自动换行缩进代码。

/*首行先缩进一个负值,然后再margin-left正直*/

li {

text-indent:-3em;

margin-left:3em;

}

/*值视情况而定,一般这两个值相等,对于例子为3em,是由于首行开始位置和其他行的开始位置距离3个字符长度*/

如果觉得《html中多行div缩进 css自动换行缩进》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。