如何给侧边栏激活菜单项添加左侧垂直指示线并解决对齐、调整线高度问题

激活菜单项对齐问题修复 #

问题原因 #

1. 仅为激活项单独添加border-left和padding-left，未激活项没有对应的左侧占位空间，自然出现内容错位
2. 侧边栏容器设置了align-items: center，所有子元素默认居中对齐，无法实现菜单项内容统一左对齐的效果

修复代码 #

body {
  margin:0;
}
.side-menu {
    color: #fff;
    background-color: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 替换原来的align-items: center，让子元素占满容器宽度 */
    align-items: stretch;
    width: 100px;
    height: 200px;
  }
/* LOGO单独设置居中 */
.side-menu > div:first-child {
  text-align: center;
}
/* 所有菜单项统一设置左侧占位，保证激活/未激活状态盒模型尺寸一致 */
.side-menu > div:last-child > div {
  border-left: 4px solid transparent;
  padding-left: 50px;
}
.active {
    /* 激活时仅修改边框颜色即可，无需调整padding */
    border-left-color: #000 !important;
    color: #000;
  }

<section class="side-menu">
   <div>LOGO</div>
   <div>
     <div class="active">Link 1</div>
     <div>Link 2</div>
     <div>Link 3</div>
     <div>Link 4</div>
   </div>
</section>

垂直指示线高度调整问题 #

border-left的高度默认和元素本身的高度完全绑定，无法单独调整。如果需要自定义指示线的高度、位置偏移，推荐使用伪元素实现，灵活度更高：

/* 开启菜单项相对定位，作为伪元素的定位父级 */
.side-menu > div:last-child > div {
  position: relative;
  padding-left: 54px;
}
/* 用伪元素生成指示线，可自定义任意尺寸、位置 */
.active::before {
  content: '';
  position: absolute;
  left: 0;
  /* 自定义指示线高度，可任意修改 */
  height: 18px;
  width: 4px;
  background-color: #000;
  /* 调整垂直位置，当前为上下居中 */
  top: 50%;
  transform: translateY(-50%);
}

效果参考图：

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