响应式三标签布局问题求助：标签对齐修正与移动端 Chevron 图标添加

一、先解决第三个标签对齐的问题 #

你目前的第三个标签之所以错位，是因为单独给.label3设置了自定义的padding-left: 51px和padding-right: 41px，破坏了和另外两个标签的内边距一致性，自然没法和下方的内容框对齐。修复方法很简单：

1. 打开你的CSS代码，找到.tabs .label3这个选择器；
2. 删掉里面的padding-left和padding-right属性，让它继承.tabs label的默认内边距padding: 1rem 1.5rem。

修改后的.label3样式应该是这样：

.tabs .label3 {
  background-color: #cecece;
  /* 移除自定义的padding属性，保持和其他标签一致 */
}

这样三个标签就会自动适配内容宽度，和下方的内容框完美对齐了。

二、给移动端添加展开/收起的 Chevron 图标 #

要实现移动端显示箭头（向下展开、向上收起），我们可以用CSS伪元素结合媒体查询来实现，不需要大幅修改HTML，步骤如下：

1. 用图片实现箭头（推荐）

假设你已经有了向下箭头和向上箭头的图片，直接通过伪元素挂载即可：

/* 移动端显示箭头 */
@media (max-width: 769px) {
  .tabs label::after {
    content: '';
    /* 替换成你自己的向下箭头图片路径 */
    background-image: url('chevron-down.png');
    width: 16px;
    height: 16px;
    margin-left: 0.8rem;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.3s ease; /* 添加平滑切换动画 */
  }

  /* 当标签被选中（内容展开）时，切换为向上箭头 */
  .tabs [type="radio"]:checked + label::after {
    background-image: url('chevron-up.png'); /* 替换成向上箭头图片路径 */
    /* 偷懒技巧：如果只有一张向下箭头图，可以用旋转替代：
    transform: rotate(180deg);
    这样就不需要额外的向上箭头图了 */
  }
}

/* 桌面端隐藏箭头 */
@media (min-width: 770px) {
  .tabs label::after {
    display: none;
  }
}

2. 可选：用Unicode字符替代图片（更简单）

如果你不想用图片，也可以直接用Unicode箭头字符，省掉图片资源的麻烦：

@media (max-width: 769px) {
  .tabs label::after {
    content: '\2193'; /* 向下箭头字符 */
    margin-left: 0.8rem;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .tabs [type="radio"]:checked + label::after {
    content: '\2191'; /* 向上箭头字符 */
    /* 或者用旋转实现：transform: rotate(180deg); 只需要一个字符 */
  }
}

这样设置后，移动端未选中的标签会显示向下箭头（提示可展开），选中的标签会显示向上箭头（提示可收起），完全符合你的需求~

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