如何为跨度设置固定宽度

Posted 2023-03-06

【中文标题】如何为跨度设置固定宽度

【英文标题】：How to set fixed width for span

【发布时间】：2016-06-01 20:14:58

【问题描述】：

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

这是我的

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

【问题讨论】：

CSS fixed width in a span的可能重复

【参考方案1】：

 Just use 

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

【参考方案2】：

将 span 的 display 属性设置为 inline-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) 所界定的空间。

【讨论】：

内联元素就是这样设计的。您可以通过我在答案中发布的链接以及w3.org/TR/CSS2/visudet.html#inline-width

获取更多详细信息