如何将侧边导航图标按钮从右侧对齐改为左侧对齐？

你的控制按钮现在在右侧，核心原因是CSS里给.controlls设置了right: 3%，直接调整定位属性并补全垂直居中样式就能移到左侧，具体操作如下：

1. 修改.controlls的CSS样式 #

把原来的.controlls代码替换成下面这段：

/* controls */
.controlls{
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 3%; /* 将right改为left，把容器定位到左侧 */
    transform: translateY(-50%); /* 配合top:50%实现整个按钮组垂直居中 */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 给按钮之间添加均匀间距 */
}

• left:3%：直接改变容器的水平定位方向，从右侧移到左侧
• transform: translateY(-50%)：解决top:50%仅让容器顶部居中的问题，让按钮组整体垂直居中
• flex布局+gap：让按钮自动垂直排列，替代手动设置margin，维护更方便

2. 给单个按钮添加基础交互样式（可选但推荐） #

当前按钮只有图标，点击区域过小，加上下面的样式能提升易用性：

.control{
    width: 45px;
    height: 45px;
    background-color: var(--color-grey5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.control.active-btn{
    background-color: var(--color-secondary);
    color: var(--COLOR-WHITE);
}

.control:hover{
    background-color: var(--color-secondary);
}

这段代码会给按钮添加圆形背景、居中图标，以及激活态和hover态的颜色变化，让交互更清晰。

修改完成后，控制按钮会固定在页面左侧垂直居中的位置，原有页面切换功能不受影响。

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