CSS和Javascript中的浮動字符

我正在研究英語/泰語短語應用程序。除了顯示英文和泰文文字外，我還需要顯示拼音文字。拼音文本是英文字符，箭頭指示音節上方的變形。例如：CSS和Javascript中的浮動字符

關節

↘ ↑

KAW-新

在那個例子中，下降箭頭應當上方「KAW」居中和向上箭頭應居中高於「新」。

的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動態編寫的，所以我願意接受建議。另外，我沒有使用等寬字體，所以我需要計算箭頭的位置與它上面的單詞相關。

如果有人有任何建議，我很樂意聽到他們。

來源

2010-01-30 ggutenberg

如何

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

該中心每個音節以上的箭頭。你應該真的讓每個音節成爲自己的容器（跨度很好，但是使它成爲內聯塊），因爲這是最合乎邏輯的方法。

這裏的線索是，內部跨度是一個塊容器，它自動佔據整行，迫使文本從下一行開始。

來源

2010-01-30 08:47:22

傑出！在我的帖子後大約2分鐘回答，完美地工作。謝謝！ – ggutenberg 2010-01-30 08:53:27

Div-inside-span無效HTML tho ...快速修復：將div轉換爲另一個範圍，並使用其上的「display：block」。或者你甚至可以在箭頭和音節之間放置一個'
'，並將整個範圍居中。 – bobince 2010-01-30 10:04:43

@bobince - 好點。改變了它。儘管我不推薦
，因爲如果css發生變化，那麼該部分的佈局將發生劇烈變化（比跨度恰好落在音節前）更爲顯着。這點並不是真正改變的CSS，但它是非語義的。如果你閱讀這一行，它會看起來應該是一個換行符，但情況並非如此。 – 2010-01-30 10:43:48

如何將它們投擲到中心對齊的2x2表？

我很確定跨瀏覽器，這會給你最好的行爲。

來源

2010-01-30 08:48:17

雖然表格會打破流程，但您必須「顯示：內聯表格」才能使其內聯工作。 – bobince 2010-01-30 12:24:09

CSS和Javascript中的浮動字符

回答

相關問題