Question

我希望能够使用CSS在音乐歌词上方显示和弦。这就是我真正喜欢它的样子：

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

以便在正确的位置显示和弦变化。在HTML中它看起来像这样：

<span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">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>标记和弦以及是否显示和弦以及show-chords类切换父div：

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 class="song show-chords">
  <span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord
</p>

Answer 1

以下是使用data-*属性和:before伪类

的变体

HTML：

<span data-chord="C">T</span>his line has a C chord, and it 
also has an <span data-chord="F">F</span> chord

CSS：

span[data-chord]:before {
    position    : relative;
    top         : -1em;
    display     : inline-block;
    content     : attr(data-chord);
    width       : 0;
    font-style  : italic;
    font-weight : bold;
}

http://jsfiddle.net/fcalderan/4wKkp/

Answer 2

是的，position: relative仍然保留所需的空间。

这是一个解决方案，在相对定位的一个周围包裹position: absolute范围，以便空间不再被保留：

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

CSS：

.chord { position: absolute
 }

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

优于left方法的优势在于它适用于任何和弦宽度（想想 Esus 或 F7 。

JSFiddle here。在IE6,7,8，Chrome 6中测试

Answer 3

对于内联元素，您可以使用display: inline-block;让它接受宽度。但是对于您的问题，为什么不简单地添加left: 3px; /*em or whatever*/？它会缩进它。

样式文本使其显示在行上方（对于歌词上方的和弦）

3 个答案: