translateX 对width的影响

问题：
在使用translatex使元素居中对齐时：

.price-box .price-count{ left: 50%; top: -24rpx;transform: translateX(-50%);height:32rpx;line-height:32rpx;padding:0 8rpx;border-radius:2rpx;color:#fff;background: -webkit-linear-gradient(right, #FF8055 , #FF5555); white-space: nowrap; z-index: 22;}

导致width变成50%；

当使用transform: translateX(-50%);时，宽度默认成父级的50%；
解决办法：
给元素加样式

white-space: nowrap;