代码之家 › 专栏 › 技术社区 › ggutenberg

CSS和javascript中的浮动字符

css html javascript

ggutenberg · 技术社区 · 16 年前

我正在开发一个英语/泰语短语应用程序。除了显示英语和泰语文本之外,我还需要显示语音文本。语音文字是英文字符,箭头指示音节上方的屈折。例子:

指节

____

考新

在该示例中,下降箭头应在“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本地存储,所以不需要进行IE测试)。HTML是使用JavaScript动态编写的,因此我愿意接受那里的建议。另外,我没有使用单空格字体,所以不知何故,我需要计算箭头相对于上面的单词的位置。

如果有人有什么建议,我想听听。

2 回复 | 直到 16 年前

Tor Valamo 16 年前

怎么样

.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>

箭头在每个音节的上方居中。你真的应该让每个音节都有自己的容器(跨度很好,但是要使它成为内联块),因为这是最合乎逻辑的方法。

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