td内联CSS中float:right使用异常，附尝试代码及效果说明

嘿，我一眼就看到问题出在哪了！你这段代码的核心问题是HTML结构不合法——<tr>标签的直接子元素只能是<td>或者<th>，你把<span>直接塞在<tr>里，浏览器会自动修正这个错误（通常是把span移到表格外面），所以你的float:right根本没作用在表格的单元格上，自然达不到预期的右对齐效果。

下面给你两种靠谱的解决方案：

方案一：合并单元格+text-align（推荐） #

这种方式最符合表格的原生布局逻辑，把左右两部分内容分别放在两个单元格里，让右侧单元格靠右对齐，同时设置表格宽度为100%来占满容器：

<table style="width: 100%;"> 
  <tr> 
    <td>Name:- <strong>XYZ</strong></td> 
    <td style="text-align: right;">Age:- <strong>38</strong></td> 
  </tr> 
</table>

方案二：用Flex布局重构表格行 #

如果想要保留四个<td>的结构，可以把<tr>设置为flex布局，利用justify-content: space-between让内容自动左右分布：

<table style="width: 100%;"> 
  <tr style="display: flex; justify-content: space-between; width: 100%;"> 
    <td>Name:-</td> 
    <td><strong>XYZ</strong></td> 
    <td>Age:-</td> 
    <td><strong>38</strong></td> 
  </tr> 
</table>

这两种方式都能实现你想要的“姓名靠左，年龄靠右”的效果，而且完全符合HTML规范，不会出现浏览器自动修正结构导致的样式失效问题。

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