在css中添加分数 [英] adding fractions in css

问题描述

我想用css添加分数

.top{border-bottom:solid black 1px; display:inline-block; float:left}
.bottom{ display:inline-block; clear:left; float:left}

，所以它们将以以下格式显示：

so they would appear in the format:

1
-
x

$ b b

http://jsfiddle.net/KVDS5/78/
它的工作原理但是当我尝试向方程中添加数字时，它只是移动到左边，我如何设置css，所以它不会影响方程的顺序？

http://jsfiddle.net/KVDS5/78/ it works but when i try to add numbers to the equation in the sides it just moves to the left side, how can i set the css so it won't effect the equation order?

推荐答案

HTML：

<span class="fraction">
    <span class="top">1</span>
    <span class="bottom">6</span>
</span>

CSS：

.fraction {
    display: inline-block;
    text-align: center;
}
.fraction, .top, .bottom {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 11px;
}
.bottom {
    border-top: 1px solid black;
    display: block;
}

这是我怎么做的。
演示： http://jsfiddle.net/MarkkNijboer/yQm72/1/

这篇关于在css中添加分数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！