如何在div盒子间的箭头上方显示文本？

你可以通过重构HTML结构+CSS布局实现箭头上方加文本的需求，同时优化原代码的冗余部分（比如重复的id可统一用class），具体实现如下：

步骤1：优化HTML结构 #

把箭头和对应文本包装在一个容器里，方便控制两者位置关系，同时给所有盒子统一使用class简化代码：

<div class="box"></div>
<div class="arrow-container">
  <span class="arrow-text">文本1</span>
  <span class="arrow">→</span>
</div>
<div class="box"></div>
<div class="arrow-container">
  <span class="arrow-text">文本2</span>
  <span class="arrow">→</span>
</div>
<div class="box"></div>
<div class="arrow-container">
  <span class="arrow-text">文本3</span>
  <span class="arrow">→</span>
</div>
<div class="box"></div>

步骤2：调整CSS样式 #

使用inline-flex让容器内的文本和箭头垂直排列并居中，同时统一盒子样式：

.box {
  height: 80px;
  width: 10%;
  border: 1px black solid;
  display: inline-block;
  vertical-align: middle; /* 和箭头容器对齐 */
}

.arrow-container {
  display: inline-flex;
  flex-direction: column; /* 垂直排列文本和箭头 */
  align-items: center; /* 水平居中 */
  vertical-align: middle; /* 和盒子对齐 */
  margin: 0 5px; /* 调整间距 */
}

.arrow-text {
  font-size: 14px;
  margin-bottom: 5px; /* 文本和箭头的间距 */
}

.arrow {
  font-size: 30px;
  color: red;
}

实现说明 #

• 用arrow-container作为文本和箭头的父容器，通过flex-direction: column实现文本在上、箭头在下的布局；
• vertical-align: middle确保盒子和箭头容器在同一水平线上对齐；
• 统一使用class替代重复的id，减少代码冗余，后期维护更便捷。

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