在Flexbox布局中调整<hr>元素高度的问题求助

嗨，我来帮你解决这个HR高度的问题～

你现在遇到的情况是：用align-self: stretch让HR占满了导航容器的整个高度，但直接设置height属性后HR就消失了。这其实是HR的默认样式和Flex布局特性共同导致的：

• HR默认自带上下边框（border-top/border-bottom），当你设置的height小于边框高度时，元素就会“隐身”；
• Flex布局里的align-self: stretch会强制元素高度适配父容器，直接覆盖了你设置的height值。

给你一个调整方案，直接修改HR的CSS就能实现你要的“高度为容器1/3左右”的效果：

hr {
  /* 先清除HR的默认样式，避免干扰 */
  border: none;
  margin: 0 1em; /* 可选：给分隔线加左右间距，视觉更舒服 */
  /* 取消拉伸，改为垂直居中对齐，这样高度由自己控制 */
  align-self: center;
  /* 设置分隔线的背景色（因为去掉border后HR本身看不见） */
  background-color: #fff;
  /* 垂直分隔线的宽度 */
  width: 2px;
  /* 设置你想要的高度，比如容器高度的1/3 */
  height: 26px; 
}

如果希望HR高度严格是导航容器的1/3，你可以先给nav设置一个固定高度，比如：

nav {
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 给导航设置固定高度 */
  height: 80px;
}

然后把HR的height设为26px（差不多80px的1/3），这样比例就精准了。

另外补充一句：其实用<div>做分隔线也是常见的方案，但既然你想用HR，上面的修改完全能满足需求～

备注：内容来源于stack exchange，提问作者reha