html 요소를 올바른 순서로 세로로 배치하십시오.

Question

html here에 분수를 표시하려고하지만 "fup"및 "fdn"요소 사이에 분수 막대를 넣을 수 없습니다.

<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 : 여기

는 HTML입니다

.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; 
} 

은 여기로 나중에 어떤 jQuery를 넣어 때문에 내가 HTML 구조를 유지할 필요가 있음을 유의하시기 바랍니다 그것을 요구할 것이다. 또한 분수 표시 줄에 별도의 html 요소가 있어야합니다.

Answer 1

발견! bar에 대한 CSS를 다음으로 변경했습니다.

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