如何用white-space: nowrap实现宽度匹配最长内容的等宽单行div？

要实现你想要的效果——让所有div一行排列、宽度统一且等于内容最长的div宽度，同时文本保持单行显示，用CSS Grid布局是最直接可靠的方案，下面是具体实现步骤：

第一步：保留原HTML结构 #

<div class="wrapper">
  <div>Hello</div>
  <div>Goodbye</div>
  <div>Some really long text</div>
  <div>More text</div>
</div>

第二步：添加CSS样式 #

.wrapper {
  /* 用Grid实现横向排列 */
  display: grid;
  grid-auto-flow: column;
  /* 核心规则：让所有列宽度统一，取最长内容的宽度 */
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
  /* 可选：给div之间添加间距，提升可读性 */
  gap: 1rem;
  /* 可选：当内容超出容器宽度时，显示横向滚动条避免溢出 */
  overflow-x: auto;
}

.wrapper > div {
  /* 强制文本单行显示，不换行 */
  white-space: nowrap;
  /* 可选：添加边框和内边距，方便直观看到宽度效果 */
  border: 1px solid #eee;
  padding: 0.5rem;
}

原理简单说明 #

• grid-auto-flow: column：让Grid容器的子元素自动横向排列，替代默认的纵向布局。
• grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))：这是实现等宽的关键——max-content会自动识别所有子元素中最长内容的宽度作为列的最小宽度，1fr则强制所有列平分容器空间，最终所有列的宽度都会统一为这个最长内容的宽度。
• white-space: nowrap：确保每个div内的文本不会换行，严格保持单行显示。

如果你更习惯用Flex布局，也可以用以下方式实现（相对Grid稍显间接）：

.wrapper {
  display: inline-flex;
  gap: 1rem;
  overflow-x: auto;
}

.wrapper > div {
  white-space: nowrap;
  flex: 0 0 max-content;
  width: 100%;
}

这种方式依赖容器为inline-flex（宽度由子元素决定），再给每个div设置width:100%，让所有div继承容器的宽度（也就是最长子元素的宽度），但Grid方案的逻辑更直观，推荐优先使用。

内容的提问来源于stack exchange，提问作者accelerate