CSS - 在文本内部更改时，外部文本不会移动

Question

当我在2个跨度元素之间更改它们不向左或向右移动的文本时，如何制作它？

这就是HTML的样子（table-layout是fixed）：

<td>
    <span class='sub'>-</span>
    <span class='amount'>0</span>
    <span class='add'>+</span>
</td>

我希望amount在-和+跨度不变的情况下进行更改（数量仍然很小，所以我不担心重叠），因为当我从0转到1时，-和+跨度靠得更近了。这不是一个巨大的不便，所以我不想要一个令人费解的CSS或JavaScript黑客，我只是想知道。

Answer 1

span是内联元素，因此与块级元素（例如div）不同，它忽略用户定义的宽度，宽度由浏览器在称为布局或重排的阶段计算。知道这一切你需要做的就是通过设置 display css属性并给它一些固定的宽度来强制元素表现为块：

<style type="text/css"> 
.block-span {   
  width:20px;
  display:inline-block; 
 } 
</style>

...
<span class="amount block-span">0</span>
...