Html 特定css处方

我需要一个特定问题的css处方。为了更好地理解，我创建了一个图像

我把文字（歌词）分成几个单独的字符。每个字符都用span.offset包装。角色可以附加和弦。和弦必须显示在相关字符上方。我想归档的是span.offset将调整其宽度，使其变宽为offset或char跨度中的一个

我想出了以下处方

html:

这仅针对span.chord width进行调整。如果缺少和弦，字符将覆盖其自身

可以存档我需要的行为吗？谢谢。

问题：

• 偏移量可能包含也可能不包含和弦元素
• 字符在任何情况下都必须与底部对齐
• 绝对定位不能用于顶部/底部对齐，因为宽度必须与较宽子对象的宽度相同

解决方案：

• 为和弦元素创建空间，无论它是否存在
• 向左浮动chord元素，并使用负边距将其推到char元素上方

p{
溢出：隐藏；
背景：#FF0；
}
.抵消{
浮动：左；
垫面：1.5em；
右边距：1米；
背景#FC0；
}
.和弦{
浮动：左；
边缘顶部：-1.5em；
背景：#0FC；
}
char先生{
显示：块；
背景：#0CC；
}

是
A.
A.
是
A.

您是否尝试将span.char位置更改为相对位置？您应该避免在内部元素

.chord

和

.char

上使用浮动，因为它们将从文档流中取出，从而导致父元素（

.offset

）崩溃。实际上，内部元素不需要使用float。

<p class="line">
    <span class="offset">
        <span class="chord">Am</span>
        <span class="char">A</span>
    </span>
    ...
</p>

p.line {
    width: 100%;
}

span.offset {
    float: left;
    position: relative;
}

span.chord {
    float: left;
    position: relative;
    top: -1.5em;
}

span.char {
    float: left;
    position: absolute;
    left: 0;
}