响应式电商网站布局问题求助：CSS适配与元素对齐修复

1. 修复.títuloproduto下划线缩放偏移、长度变化问题 #

如果你的下划线是用border-bottom或独立元素实现的，容易出现缩放时的偏移和长度波动。建议用伪元素绑定到标题容器，确保下划线宽度与容器完全同步：

.títuloproduto {
  position: relative;
  /* 保留原有字体、间距等样式 */
}
.títuloproduto::after {
  content: '';
  position: absolute;
  bottom: -3px; /* 调整下划线与文字的距离 */
  left: 0;
  width: 100%;
  height: 2px; /* 下划线厚度 */
  background-color: #00f; /* 替换为你的蓝色值 */
}

这样下划线会完全贴合标题容器宽度，窗口缩放时不会偏移，长度始终与标题容器一致。

2. 实现.listadeprodutos网格图片适配标题宽度+响应式堆叠 #

首先确保.listadeprodutos容器宽度与.títuloproduto容器宽度完全一致（比如都设为100%，或绑定到同一个父容器宽度），然后用grid-template-columns: repeat(auto-fill, minmax(xxxpx, 1fr))实现自动列数调整，同时保留列间距：

.listadeprodutos {
  width: 100%; /* 和标题容器同宽 */
  display: grid;
  column-gap: 4%;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* 最小宽度260px时自动堆叠，可按需调整 */
}
.listadeprodutos img {
  width: 100%;
  height: auto; /* 保持图片比例 */
}

auto-fill会根据容器宽度自动计算列数，当窗口宽度不足容纳两列时，网格项自动堆叠成单列，同时图片宽度始终撑满网格项，间接对齐标题下划线的宽度。

3. 商品按钮居中对齐并保持同一水平线 #

给每个商品项的容器设置flex布局，强制所有容器高度一致，再让按钮居中：

/* 假设每个商品项的外层容器类是.produto-card */
.produto-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让商品内容和按钮上下分布 */
  height: 100%; /* 所有卡片高度统一 */
}
/* 商品按钮类 */
.produto-btn {
  align-self: center; /* 水平居中 */
  /* 也可用 margin: 10px auto 0; 实现居中并添加上边距 */
}

通过height:100%让所有商品容器高度一致，justify-content: space-between将按钮推到容器底部，配合align-self:center实现居中，确保所有按钮保持在同一水平线上。

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