如何做到当我更改 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,我只是想知道。
最佳答案
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>
...
关于html - CSS - 使外部文本在内部文本更改时不移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25826844/