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

Question

我正在尝试在 html 中显示分数 here ，但我不能在元素“fup”和“fdn”之间放置分数栏。

这是 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;
 }