html – 设计文字,使其出现在线上方(歌词上方的和弦)

概述我希望能够使用CSS在音乐中的歌词之上显示和弦.这就是我真的喜欢它的样子： C FThis line has a C chord, and it also has an F chord 使和弦变化显示在正确的地方.在HTML中,它看起来像这样： <span class="chord">C</span>This l 我希望能够使用CSS在音乐中的歌词之上显示和弦.这就是我真的喜欢它的样子：

C                                           FThis line has a C chord,and it also has an F chord

使和弦变化显示在正确的地方.在HTML中,它看起来像这样：

<span >C</span>This line has a C chord,and it also has an <span >F</span>F chord

我设法几乎得到了这种风格的效果：

.chord {  position: relative;  top: -1em;}

但问题是它有差距：

C                                            F This line has a C chord,and it also has an  F chord

如果只有wIDth：0(我将使用overflow：visible)工作在一个内联的跨度.有没有人有解决方案？

编辑：谢谢@Kyle Sevenoaks.对于任何有兴趣的人来说,这是我的完整的CSS,它允许经文标注< p>,和弦标记为< span>以及是否显示和弦是否与父div上的show-chords类切换：

p.song span {  display: none;}p.song.show-chords p {  line-height:2.3em;  margin-bottom:2em;}p.song.show-chords span {  position: relative;  top: -1em;  display:inline-block;  wIDth: 0;  overflow:visible;  text-shadow:#CCC -1px 1px;  color:#00F;  Font-weight:bold;  Font-family:Arial,Helvetica,sans-serif;}

<p >  <span >C</span>This line has a C chord,and it also has an <span >F</span>F chord</p>

解决方法 对于内联元素,可以使用display：inline-block;让它接受宽度.但是对于你的问题,为什么不简单地添加左：3px; / * em或任何* /？它将缩进. 总结

以上是内存溢出为你收集整理的html – 设计文字,使其出现在线上方(歌词上方的和弦)全部内容，希望文章能够帮你解决html – 设计文字,使其出现在线上方(歌词上方的和弦)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。