如何设置HTML中td元素内的span元素向右浮动并对齐输入框右上方

问题根源 #

你给span元素加了position-absolute类，触发绝对定位规则后元素会脱离正常文档流，float属性对绝对定位元素完全不生效，这是样式不生效的核心原因。

推荐解决方案 #

要实现小字号数字1作为上标固定在输入框右侧、响应式下位置不变的需求，用绝对定位方案兼容性最好、位置最稳定：

1. 给包裹元素的td添加相对定位属性，作为绝对定位元素的父级锚点，HTML修改如下：

<table>
  <tbody>
    <tr>
     <td>House</td>
     <td class="position-relative">
       <span class="badge-tooltip">1</span>
       <input class="form-control rounded-0 border-0 m-0 d-block text-right" type="text" />
     </td>
     <td></td>
     <td></td>
    </tr>
  </tbody>
</table>

2. 修改CSS配置：

/* 没有引入bootstrap工具类的话，手动给td加position: relative;即可 */
td.position-relative {
  position: relative;
}
.badge-tooltip {
  position: absolute;
  /* 以下数值可根据实际视觉效果微调 */
  top: 2px;
  right: 4px;
  font-size: 12px;
  z-index: 10; /* 确保数字不会被输入框遮挡 */
}

该方案下，数字始终对齐td的右上角，刚好落在占满td宽度的输入框的右上角位置，响应式布局下td宽度变化时，数字始终保持和输入框的相对位置，不会发生偏移。

浮动备选方案 #

如果你不想用绝对定位，先删掉span上的position-absolute类，调整元素顺序后浮动即可生效：

<td>
  <input class="form-control rounded-0 border-0 m-0 text-right" type="text" style="width: calc(100% - 22px); display: inline-block;" />
  <span class="badge-tooltip">1</span>
</td>

.badge-tooltip {
  float: right;
  font-size: 12px;
  line-height: 1.2; /* 调整行高实现上标效果 */
}

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