html - CSS - 使外部文本在内部文本更改时不移动

Question

如何做到当我更改 2 个 span 元素之间的文本时它们不会向左或向右移动？

这是 HTML 的样子(table-layout 是 fixed):

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

我希望 amount 在 - 和 + 跨度移动的情况下发生变化(数量将保持一个小数字，所以我'我不担心重叠)，因为当我从 0 到 1 时，- 和 + 跨度会更近一起。这并不会造成很大的不便，所以我不想要复杂的 CSS 或 JavaScript hack，我只是想知道。

Answer 1

span 是行内元素，因此与 block 级元素(例如 div)不同，它会忽略用户定义的宽度，宽度由浏览器在称为布局或回流的阶段计算。知道了这一点，您需要做的就是通过设置其 display css 属性并为其指定一些固定的 width 来强制该元素表现为一个 block :

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

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