如何使用CSS修正container-right子元素因span导致的右对齐异常？

咱们先捋清楚问题根源：你给.container-right设置了float: right，这只是让整个容器块靠右侧，但容器内部的子元素（比如<div>和<span>）默认是左对齐的——所以哪怕容器在最右边，里面的内容还是靠左摆着，自然达不到你想要的整体右对齐效果。

下面给你两种实用的解决办法：

方法1：给container-right内部元素强制右对齐 #

直接修改CSS，给.container-right添加text-align: right，让它的所有子元素都继承靠右对齐的属性：

.card-middle-row .container-right {
  float: right;
  margin-right: 12px;
  line-height: 20px;
  color: #727272;
  font-size: 12px;
  text-align: right; /* 新增这一行，让内部内容靠右 */
}

这样不管是里面的<div>Price</div>还是<span>order</span>，都会跟着容器一起靠右对齐，快速解决问题。

方法2：用Flex布局代替Float（更推荐） #

Float是比较老旧的布局方案，容易出现排版bug，现在更推荐用Flexbox实现这种左右分布的布局，代码更简洁稳定：

首先修改父容器.card-middle-row的CSS：

.card-middle-row {
  display: flex; /* 开启flex布局 */
  justify-content: space-between; /* 让左右容器分别贴紧两端 */
  padding: 0 12px; /* 代替原来给子容器加的margin-left/margin-right */
  margin-top: 10px;
}

然后调整左右子容器的CSS，去掉多余的float属性：

.card-middle-row .container-right {
  line-height: 20px;
  color: #727272;
  font-size: 12px;
  text-align: right; /* 依然需要这行让内部内容靠右 */
}

.card-middle-row .container-left {
  line-height: 20px;
  color: #727272;
  font-size: 12px;
}

HTML结构完全不用改动，这种布局方式不仅能完美实现需求，还能避免float带来的清除浮动等额外问题，适配性也更强。

你可以根据项目实际情况选择其中一种方法，个人更推荐Flex布局哦~

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