css - HTMLのスパン属性を使用して値を固定したままにする

Question

ここに私のスパン要素があります:

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

レファレンスNo. テキストは固定のままです。しかし、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を参照してください