html - 如何为跨度设置固定宽度

Question

看我的截图，即使我设置了宽度，跨度宽度仍然是“自动”

这是我的

<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

将跨度的显示属性设置为内联 block ，如:

.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>

内联元素仅占据由定义内联元素的标签 (MDN) 限定的空间。