HTML中如何实现同一行内部分文本左对齐、部分右对齐

你给<a>标签加的text-align:right不生效，核心原因是<a>默认是行内元素，宽度完全由自身内容撑开，没有多余的横向空间，文本对齐属性不会产生效果。实现这类横向两端布局，用Flex布局是最简洁、维护成本最低的方案，不需要写容易出问题的浮动逻辑。

首先给.header容器添加Flex布局样式：

.header {
  display: flex;
  /* 子元素沿主轴两端对齐，中间自动填充空白 */
  justify-content: space-between;
  /* 可选配置：让子元素垂直居中，搭配内边距、高度优化视觉效果 */
  align-items: center;
  padding: 0 16px;
  height: 60px;
}

HTML部分去掉行内无效的text-align:right样式即可：

<div class="header">
  <span>Dashboard</span>
  <a href="updatedetails.php"><?php echo htmlspecialchars($_SESSION["username"]); ?></a>
</div>

无需修改原有CSS规则，只需要把所有需要居右的元素包裹在同一个容器内，Flex布局会把这个容器识别为单个整体，自动推到Header最右侧，容器内部的元素默认横向排列，刚好满足多个元素挨在一起、整体居右的需求。
调整后的HTML代码：

<div class="header">
  <span>Dashboard</span>
  <div class="header-right">
    <a href="updatedetails.php"><?php echo htmlspecialchars($_SESSION["username"]); ?></a>
    <a href="logout.php" style="margin-left: 12px;">Logout</a>
  </div>
</div>

提示：不建议使用传统float浮动实现这类布局，很容易引发父元素高度塌陷、移动端错位等问题，Flex方案目前已经兼容所有主流浏览器，是这类布局的首选实现方式。

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