HTML/CSS/ReactJS中text-align属性问题：文本右对齐失效排查

嘿，我瞅了你的代码，马上就发现问题所在啦——你给.right-side设置了text-align: right但没生效，核心原因是你用了<span>标签，这玩意儿是行内元素，它的宽度只够装下自己的内容，根本没法让文本“右对齐”到父容器的边缘～

问题拆解 #

你的.left-side和.right-side都是作用在<span>上，而行内元素的特性就是“随内容自适应宽度”，不会像块级元素那样填满父容器。所以哪怕你设置了text-align: right，也只是在<span>自己那一小块区域里右对齐，看起来和没设置完全一样。

3种快速解决方案 #

方案1：把span改成行内块元素，手动分配宽度

给两个span类添加display: inline-block，再设置合适的宽度，让它们能瓜分父容器的空间：

.left-side {
  text-align: left;
  display: inline-block;
  width: 48%; /* 留2%的间距避免挤在一起 */
}
.right-side {
  text-align: right;
  color: red;
  display: inline-block;
  width: 48%;
}

这样两个元素就能并排，各自占据接近一半的宽度，text-align就能正常发挥作用了。

方案2：用Flex布局（推荐！现代又灵活）

给父容器.file-values设置Flex布局，一行代码就能实现完美的左右对齐：

.file-values {
  display: flex;
  justify-content: space-between; /* 子元素自动靠向左右两端 */
  align-items: center; /* 垂直居中对齐，让文字更整齐 */
}

/* 原来的span样式保留就行，不需要额外设置宽度 */
.left-side {
  text-align: left;
}
.right-side {
  text-align: right;
  color: red;
}

这种方法不需要手动算宽度，响应式表现也更好，后续要调整布局也更方便。

方案3：用浮动（传统布局方式）

给.right-side设置右浮动，同时记得给父容器清除浮动避免高度塌陷：

.right-side {
  text-align: right;
  color: red;
  float: right;
}

/* 清除浮动，修复父容器高度问题 */
.file-values::after {
  content: "";
  display: table;
  clear: both;
}

不过浮动容易引发其他布局问题，比如后续元素错位，所以优先推荐前两种方案。

小提示 #

如果你希望File category那一行也能和上面一样左右对齐，只要把它也拆成两个<span>分别套上.left-side和.right-side类就行～

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