html - Css 边框底部对于两位数和一位数保持固定

Question

这是html代码

<div>
   <div class="fractop"><span>11</span></div>
   <div class="fracbottom">2</div>
</div>

<div>
   <div class="fractop"><span>5</span></div>
   <div class="fracbottom">2</div>
</div>

这是CSS代码

<style>
   .fractop{
       border-bottom:solid black 0px; 
       display:inline-block; 
       float:left;
       margin-top:20px; 
       text-align:center; 
       width:100%;
   }
   .fracbottom{ 
       display:inline-block;
       clear:left; 
       float:left; 
       width:100%; 
       text-align:center;
   }
   .fractop span{
       border-bottom:solid black 3px; 
    }

</style>

我需要将分数的“除以”行固定为 2 位数。它不需要动态变长或变短。

Answer 1

将你的 .fractop span 改成这个

.fractop span{
   border-bottom:solid black 3px; 
   width: 17px;
   display: inline-block;
}