在html中的分数旁边写文本

Question

我之前问过这个qn：How to represent fractions in 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类显示属性设置为内联块。 我想你也必须摆弄它的垂直对准道具。

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>标签被声明为行内元素，因此分数内将没有多余的空格。