解决因标题长度差异导致容器内数量元素位置不一致问题

我想让所有.category-item容器布局保持一致，但最后一个标题为“CAMISAS”的容器因为标题长度比其他短，导致括号包裹的数量元素无法和其他容器对齐，怎么调CSS解决？

解决方案 #

核心问题是你用了transform: translateX(19px)这种固定偏移来定位数量元素，一旦标题长度变化，偏移量就不再适配。下面是两种可行的修改方案：

方案一：Flex布局自动对齐（推荐） #

利用Flex的空间分配特性，让数量元素始终紧贴标题右侧，不受标题长度影响：

/* 修改.category-content的布局 */
.category-content {
    display: flex;
    align-items: center; /* 让标题和数量垂直居中对齐 */
    gap: 8px; /* 标题和数量之间的固定间距，替代原来的偏移 */
}

/* 让标题占据剩余空间，把数量挤到右侧 */
.title-category {
    margin-top: 8px;
    margin-bottom: -14px;
    font-size: 14px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    white-space: nowrap;
    flex: 1;
}

/* 移除固定偏移，让Flex布局控制位置 */
.quantity-category {
    font-size: 11px;
    color: hsl(0, 0%, 47%);
    transform: none;
}

方案二：固定标题宽度 #

如果希望所有标题区域宽度完全一致，数量元素位置绝对统一，可以给标题设置固定宽度：

.title-category {
    margin-top: 8px;
    margin-bottom: -14px;
    font-size: 14px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    white-space: nowrap;
    width: 130px; /* 根据最长标题的实际宽度调整数值 */
    display: inline-block; /* 确保宽度生效 */
}

.quantity-category {
    font-size: 11px;
    color: hsl(0, 0%, 47%);
    transform: none; /* 移除固定偏移 */
}

额外优化建议 #

为了让整个分类项的内部布局更稳定，可以给.category-texts添加垂直Flex布局：

.category-texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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