为什么为span元素设置的text-align右对齐属性没有生效？

问题原因 #

• text-align 属性的作用逻辑是控制块级容器内部的行内内容的对齐规则，它本身不能直接让行内元素自身发生位置偏移
• <span> 是默认的行内元素，宽度仅由自身内容撑开，没有多余的水平空间供内部内容对齐，因此你给span.right设置的text-align: right不会生效
• <div> 是默认的块级元素，宽度默认占满父容器（整行），有足够的水平空间，所以内部的text-align规则可以生效

解决方案 #

方案1：使用Flex布局（最推荐，无副作用） #

给两个span的父容器添加flex布局规则即可，不需要修改span本身的属性，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    .row-container {
      display: flex;
      justify-content: space-between;
      /* 如需两个元素垂直居中对齐，可额外添加 align-items: center; */
    }
  </style>
</head>
<body>
  <div class="row-container">
    <span>age</span>
    <span>name</span>
  </div>
</body>
</html>

flex会自动将第一个span贴左、第二个span贴右，且两个元素始终保持在同一行。

方案2：使用float属性（简单快捷） #

直接给需要右对齐的span添加浮动规则即可生效：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    .right {
      float: right;
    }
  </style>
</head>
<body>
  <span>age</span>
  <span class="right">name</span>
</body>
</html>

如果父容器有固定高度要求，需要额外处理浮动带来的高度塌陷问题，简单场景下该方案可以直接使用。

方案3：修改span为行内块级元素 #

如果你的布局有固定宽度要求，可以调整span的显示属性后再设置对齐规则：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    .right {
      display: inline-block;
      width: calc(100% - 50px); /* 减去左侧age的占位宽度，可根据实际需求调整 */
      text-align: right;
    }
  </style>
</head>
<body>
  <span>age</span>
  <span class="right">name</span>
</body>
</html>

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