当前位置:  开发笔记 > 编程语言 > 正文

如何在跨度中的CSS中创建与浏览器兼容的所有悬挂缩进样式

如何解决《如何在跨度中的CSS中创建与浏览器兼容的所有悬挂缩进样式》经验,为你挑选了2个好方法。

我发现的唯一一件事就是;

.hang {
    text-indent: -3em;
    margin-left: 3em;
} 

这种方法的唯一方法是将文本放入段落中,这会导致那些可怕的难看的额外行.我宁愿把它们放在某种东西中.

我也在寻找一种进一步缩进的方法,而不仅仅是单级悬挂.使用段落来堆叠缩进不起作用.



1> Shog9..:

是一个内联元素.除非你在谈论一个段落(通常意味着一个块元素),否则术语悬挂缩进是没有意义的.你可以,当然,更改页边距

或任何其他块元素得到段落之间摆脱额外的垂直空间.

你可能需要这样的东西display: run-in,根据上下文,标签将变成块或内联......遗憾的是,浏览器尚未普遍支持这一点.



2> 小智..:

找到了一个很酷的方法来做到这一点,减去令人讨厌的跨度.

p {
  padding-left: 20px; 
} 

p:first-letter {
  margin-left: -20px;
}

好又简单:D

如果新行在p块中困扰你,你可以添加

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

JSFiddle示例


或者只使用`p {text-indent:-20px; padding-left:20px}`
推荐阅读
郑谊099_448
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有