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>

<div>
   <div class="fractop"><span>-135</span></div>
   <div class="fracbottom">25</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; 
   width: 17px;
   display: inline-block;
}

</style>

现在逐行划分宽度与17px相同。我需要根据数量动态改变宽度。如果数字是一位数，那么逐行开始于数字之前，并以数字之后结束。我怎样才能动态地设置一条线？

Answer 1

如果您不需要固定长度，请不要明确指定width。此外，通过使用border-top作为底部<span>元素，我们可以确保分界线也与底部数字相关。

<强> Example Here

.fractop span, .fracbottom span {
    display: inline-block;
}

.fractop span { border-bottom:solid black 3px; }

.fracbottom span { 
    border-top: solid black 3px;
    margin-top: -3px; /* overlap the borders */
}

css边框底部根据值而变化

1 个答案: