css - 使用 html 中的 span 属性保持值固定

Question

这是我的 span 元素:

<span style="padding-right:20px">Reference No.<?php echo $ref_number; ?></span>

我想要引用编号。文本保持固定。但是根据来自 db 的值的长度，文本左右移动。我该如何解决？

Answer 1

尝试这样的事情:将宽度调整为 number 跨度以固定 label 跨度:

HTML:

<span class="label">Reference No.</span>
<span class="number"><?php echo $ref_number; ?></span>

CSS:

span.number {
    display: inline-block;
    width: 140px; // maximum reference width
}

参见 jsfiddle