如何在HTML中将span元素设置为向td元素的右侧浮动？

在上图中，我需要将文本1（小写字母）放置在列的右侧。在该列中，已存在一个输入字段。

我已经尝试了不同的方法来设置通过CSS，但没有工作。

我想使文本1始终像上标一样与输入字段右对齐，并保持在响应式模板中的位置。

代码：

<代码><；表格>；<；正文（>；）<；TR>；<；TD>；房子<；/TD>；<；TD>；<；span类="；位置-绝对徽章-工具提示"；>；1<；/span>；<；输入类="；表单控制四舍五入-0边框-0 M-0 D块文本-右"；类型="；文本"；/>；<；/TD>；<；TD>；<；/TD>；<；TD>；<；/TD>；<；/tr>；<；/t正文>；<；/表格>；

CSS

<代码>.徽章-工具提示{浮子：右；}

顺晟科技：

你可以用你自己的绝对位置，像这样。

请记住，position-reletive的值需要根据下一个td的元素中是否有任何文本进行调整，并且在不同的分辨率下，需要使用 <td class="position-relative"> <span class="position-absolute top-0 end-0"> 1 </span> <input class="form-control rounded-0 border-0 m-0 d-block text-right" type="text" /> </td>

<代码><；表格>；<；正文（>；）<；TR>；<；TD>；房子<；/TD>；<；TD类=“ relative-TD ”>；<；span CLASS=“ position-absolute 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>；<；/t正文>；<；/表格>；

您已经使用了引导类 <table> <tbody> <tr> <td>House</td> <td> <span class="position-absolute 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> ，因此要实现您想要的效果，请不使用.badge-tooltip { float: right; } ，而是将引导类position-absolute添加到父元素中，并将float:right添加到子元素中：

<代码><；TD类="；相对位置"；>；<；span类="；位置-绝对前-0末-0"；>；1<；/span>；<；输入类="；表单控制四舍五入-0边框-0 M-0 D块文本-右"；类型="；文本"；/>；<；/TD>；

这将使范围像上标一样与右上方对齐。