html - 如何使 DIV 或 SPAN 具有固定宽度的内容加上带有空白的剩余可用空间？

Question

我目前有类似下面的内容。

<div width="100%">
  <span width="33%">FIRSTNAME</span>
  <span width="33%">|LASTNAME</span>
  <span width="33%">|CITY</span>
</div>

执行时看起来像下面这样:

FIRSTNAME|LASTNAME|CITY

但我实际需要的是如下所示:(占据页面宽度的 100%，其中 span 元素各占主 DIV 元素的 33%)

FIRSTNAME                      |LASTNAME                       |CITY

拜托，任何人都可以提出实现这一目标的方法吗？

Answer 1

您可以使用 Flexbox 来做到这一点:

div {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* evenly distributed */
}

span {
  flex: 1; /* each 33.33% of the flex-container's (parent's) width */
}

<div>
  <span>FIRSTNAME</span>
  <span>|LASTNAME</span>
  <span>|CITY</span>
</div>