Bootstrap 5 如何实现输入框内文本右对齐？

你当前代码里的float-end类是控制输入框元素本身浮动位置的，不会改变输入框内部的文字对齐方式。要实现框内数值右对齐，按以下步骤调整即可：

• 移除输入框上的float-end类，该浮动属性会破坏单元格原本的居中布局，导致元素位置错位
• 给输入框增加内部文本右对齐的样式，两种实现方式可选：
  1. 如果项目使用Bootstrap框架，直接给input添加内置的text-end类即可，该类等价于text-align: right样式，可让输入框内的所有文本靠右侧展示
  2. 如果不依赖框架工具类，直接给input设置内联样式text-align: right即可，效果完全一致

调整后的完整代码示例：

<td style="text-align:center; vertical-align: middle; padding: 8px 18px;">
    <input 
      type="text" 
      class="form-control text-end" 
      id="orden${count}" 
      value="${c}"
    >
</td>

不使用Bootstrap类的内联样式实现版本：

<td style="text-align:center; vertical-align: middle; padding: 8px 18px;">
    <input 
      type="text" 
      class="form-control" 
      style="text-align: right; padding-right: 0.5rem;"
      id="orden${count}" 
      value="${c}"
    >
</td>

优化提示：额外增加的padding-right: 0.5rem可以避免对齐后的数值紧贴输入框右边缘，视觉效果更协调。

内容的提问来源于stack exchange，提问作者Emili Bellot Pulido