以正确的顺序垂直定位html元素

Question

我正在尝试在html here中显示一个分数，但我不能在分数之间放置分数条＆＃34; fup＆＃34;和＆＃34; fdn＆＃34;。

这是html：

<div class="fraction" id="f1">
    <div class="fup" id="0">
        <div id="addition_1">
            <div class="numeric" id="num_0">2</div>
            <div class="operator" id="op_0">+</div>
            <div class="numeric" id="num_1">1</div>
        </div>
    </div>
    <div class="bar" id="bar_01"></div>
    <div class="fdn">
        <div class="numeric" id="1">2</div>
    </div>
</div>

和css：

.fraction {
    display: inline-block;
    position: relative;
    vertical-align: middle; 
    letter-spacing: 0.001em;
    text-align: center;
    font-size: 120px;
}

.bar {
    border-top: thin solid black;
    display: block;
 }


.numeric { 
     float: left;
     font-size: 120px;
     cursor: pointer;
}


.operator {
     float: left;
     font-size: 120px;
}

请注意，我需要保持html结构，因为我将在稍后放置一些需要它的jquery。此外，我需要让分数栏成为一个单独的html元素。

Answer 1

发现它！我将bar的css更改为：

.bar {
    border-top: thin solid black;
    display: block;
    clear: both;
 }