CSS和Javascript中的浮动字符

我正在开发英语/泰语短语应用程序.除了显示英语和泰语文本外,我还需要显示语音文本.语音文本是英文字符,带有箭头,指示音节上方的变形.例：

指关节

↑↑

新手

在该示例中,下降箭头应居中在“ kaw”上方,而向上箭头应居中在“ new”上方.

HTML当前如下所示：

<div id="2173" class="eng">knuckles</div>
<div id="2173" class="phonetic"><div class="arrow">↘</div><div class="text">kaw-</div><div class="arrow">↑</div><div class="text">new</div></div>

CSS当前看起来像：

.arrow {
    margin-left:1em;
    padding-bottom:1em;
    display:inline;
    position:absolute;
}

.text {
    display:inline;
    padding-top:0;
    margin-top:1em;
    position:relative;
    float:left;
}

那就是我想出的HTML和CSS,但是我似乎无法让它以我想要的方式显示.在Safari中几乎是正确的,但在Firefox中则完全没有问题(因为该应用程序使用了IE不支持的HTML5 localStorage,因此它不会打扰IE测试). HTML是使用JavaScript动态编写的,因此我对其中的建议持开放态度.另外,我没有使用等宽字体,因此我需要以某种方式计算箭头相对于上方的单词的位置.

如果有人有任何建议,我很想听听他们的建议.

最佳答案

怎么样

.syllable {
    display:inline-block;
}
.syllable span {
    display:block;
    text-align:center;
}

<span class="syllable"><span>↘</span>kaw</span>
-<span class="syllable"><span>↑</span>new</span>

这使箭头位于每个音节上方.您确实应该使每个音节都具有自己的容器(跨度很好,但请使其内联),因为这是最合理的方法.

这里的线索是内部跨度是一个块容器,它自动占据了整行,迫使文本从下一行开始.

原文链接：https://www.f2er.com/html/530612.html

CSS和Javascript中的浮动字符

猜你在找的HTML相关文章