How to set fixed width for span

Question

see my screenshot, even I set width, the span width still be "auto"

here is my

<div class="container">
  <div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
  </div>
  <div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
  </div>
</div>

Answer 1

Set the display property of the spans to inline-block like:

.container span {
  display: inline-block;
}

<div class="container">
  <div class="row"><span style="width:60px;background-color: red;">prefix1</span><span>prpr</span>
  </div>
  <div class="row"><span style="width:60px;background-color: red;">pre2</span><span>prpr</span>
  </div>
</div>

An inline element occupies only the space bounded by the tags that define the inline element (MDN).