Question

我正在尝试使用css

添加分数

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

因此它们将以以下格式显示：

1
-
x

http://jsfiddle.net/KVDS5/78/ 它有效，但是当我尝试将数字添加到两侧的方程式时它只是移动到左侧，我如何设置css以便它不会影响方程式顺序？

Answer 1

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中添加分数

1 个答案: