CSS - Сделать внешний текст не перемещаться при изменении внутреннего текста

Question

Как сделать так, чтобы при изменении текста между двумя элементами 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-хак, мне просто интересно.

Answer 1

Пробел является встроенным элементом, так что в отличие от элемента уровня блока (например, div) он игнорирует определяемую пользователем ширину, а ширина вычисляется браузером во время этапа, известного как макет или переплавка. Зная это все, что вам нужно сделать, это заставляет элемент вести себя как блок, установив его дисплея CSS свойства и дает ему некоторые фиксированные ширину :

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

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