专注WEB开发 分享经验,沉淀知识

css自动换行缩进

 作者:chenxing  时间:2017-07-31 22:37  评论:

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

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

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

<div style="width: 290px;">
o<ul style="list-style: none;">
o<li>网站:求索网</li>
o<li>站长:chenxing</li>
o<li>域名:www.qiusuoweb.com</li>
o<li>主旨:专注WEB开发,分享经验,沉淀知识,求索新技术</li>
o<li>技术交流群:157451741</li>
o</ul>
</div>

页面效果:

css首行缩进

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

<div style="width: 290px;">
o<ul style="list-style: none;">
o<li>网站:求索网</li>
o<li>站长:chenxing</li>
o<li>域名:www.qiusuoweb.com</li>
o<li style="text-indent: -3em;margin-left: 3em;">
o    主旨:专注WEB开发,分享经验,沉淀知识,求索新技术
o</li>
o<li>技术交流群:157451741</li>
o</ul>
</div>

页面效果图:

css首行缩进

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

/*首行先缩进一个负值,然后再margin-left正直*/
li {
    text-indent:-3em;
    margin-left:3em;
}
/*值视情况而定,一般这两个值相等,对于例子为3em,是由于首行开始位置和其他行的开始位置距离3个字符长度*/

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/62.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

个人博客图片免费存放解决方案

 2022-03-21 00:16  63

MySQL中的MVCC总结

 2022-03-19 03:00  86

什么才是高级工程师的第一技能

 2022-03-16 22:04  61

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里