HTML/CSS求助：Stories与Reels文本无法并排显示

数据老陈

2026-7-21

Facebook克隆版Stories/Reels并排布局修复

问题根源

你的.upper_Box容器未启用弹性布局，即便给.stories和.reels设置了inline-block和50%宽度，块级父容器的默认布局规则仍会让两个元素上下排列。此外，文本对齐方式设置有误，不符合预期的左右分布样式。

修复步骤

给.upper_Box添加display: flex，让子元素横向排列
调整文本对齐方式为居中，贴合Facebook原版样式
可选：添加活跃状态样式，模拟选中时的下划线效果

修改后的CSS代码片段

/* 修复后的upper_Box样式 */
.upper_Box {
  display: flex; /* 启用弹性布局 */
  justify-content: space-between;
  align-items: center;
  height: 30%;
  width: 100%;
  border-bottom: 2px solid #e4e6eb; /* 改用Facebook的浅灰分隔线，更贴近原版 */
}

.stories {
  width: 50%;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: #1877f2; /* Facebook主题蓝 */
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
}

.reels {
  width: 50%;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent; /* 默认隐藏下划线 */
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
}

/* 可选：活跃状态样式 */
.reels.active {
  text-decoration-color: #1877f2;
}