在 html 中的分數旁邊寫文本

Question

我之前問過這個 qn： 如何在 html 中表示分數。 這是關於在 html 中編寫分子和分母，提供的解決方案允許我以正確的格式編寫分數。

但是，我不能在它旁邊寫文字。 如果我在它旁邊寫文字，它會一起出現在頂部或底部。 它出現在它的下方。 我希望文本出現在它旁邊。

代碼在這里：

.fraction {
  position: relative;
  width: 1em;
  font-size: 2em;
}
.numerator {
  border-bottom: 2px solid black;
  text-align: center;
}
.denominator {
  border-right: 2px solid black;
  width: 0.75em;
  text-align: center;
}

<div class="fraction">
  <div class="numerator">3</div>
  <div class="denominator">8</div>
</div>

文本顯示如下：

有什么解決辦法嗎？ 有什么解決辦法嗎？

Answer 1

將 .fraction 類顯示屬性設置為 inline-block。 我想你還必須擺弄它的垂直對齊道具。

Answer 2

添加這些 css -

.fraction {
    display: inline-block;
    vertical-align: top;
}

工作小提琴 - http://jsfiddle.net/et2Lan5k/

Answer 3

添加 div 詞並設置 CSS CSS：

.fraction {
    position: relative;
    width: 1em;
    font-size: 2em;
}
.numerator {
    border-bottom: 2px solid black;
    text-align: center;
}
.denominator {
    width: 0.75em;
    text-align: center;
}
.word{
    position:absolute;
    top:0px;
    line-height:2.5em;
    left:1em;
}

HTML：

<div class="fraction">
    <div class="numerator">3</div>
    <div class="denominator">8</div>
    <div class="word">HI</div>
</div>

https://jsfiddle.net/e9nc6gna/1/

Answer 4

這可以通過幾行代碼來實現：

將分子和分母包裹在<span>標簽內。
將它們再次包裹在容器<span> 。
然后聲明容器inline-block ，使其保持在一行上。
為容器聲明vertical-align: middle屬性。
在分子底部（或分母頂部）添加邊框，使其看起來像一個分數。

使用此代碼：

 * { font-size: 50px; } .container { vertical-align: middle; display: inline-block; } .numerator { border-bottom: 1px solid; }

 33<span class="container"><span class="numerator">1</span><br><span>3</span></span>

另外，不要在這些標簽之間放置換行符，否則，分數中會有不必要的空格，因為<span>標簽被聲明為內聯元素。