如何使 DIV 或 SPAN 具有固定的宽度，内容加剩余可用 space 白色 space？

Question

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

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

执行时如下所示：

名字|姓氏|城市

但我实际需要的是如下所示：（占据页面宽度的 100%，其中每个 span 元素占主要 DIV 元素的 33%）

名字 |姓氏 |城市

拜托，有人可以提出实现此目标的方法吗？

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>

Answer 2

您可以使用 css

<div class="container">
  <span>FIRSTNAME</span>
  <span>|LASTNAME</span>
  <span>|CITY</span>
</div>

body {
  width: 100%;
}
.container {
  width: 100%;
}
.container span {
  width: 33%;
  display: inline-block
}

或者您可以使用 bootstrap 来帮助您

https://getbootstrap.com/

如何使 DIV 或 SPAN 具有固定的宽度，内容加剩余可用 space 白色 space？

How to make DIVs or SPANs to have a fixed width with content plus rest available space with white space?

html

css

freemarker