ASP.NET项目中可调整大小文本框的字符限制文本对齐问题

你的问题核心是绝对定位的参考容器错误，加上栅格列类破坏了提示框的自适应对齐逻辑，下面是修正后的实现方案：

核心修改点 #

• 给文本框的父容器添加position-relative，让提示框的绝对定位以父容器为基准
• 移除提示框上的col-md-*、ml-*等固定布局类，避免栅格系统干扰对齐
• 用Bootstrap的文本对齐类实现靠右，保证提示框和文本框宽度同步

修正后的代码示例 #

Example 1 #

<div class="col-md-3 mb-3 ml-2 position-relative">
    @Html.EditorFor(m=> m.Title, new { htmlAttributes = new { @class = "form-control characterlimit", @maxlength = 128 } })
    <div class="text-muted mt-1" style="font-size: 12px; text-align:right;">128 Character Limit</div>
</div>

Example 2 #

<div class="col-md-6 mb-3 ml-2 position-relative">
    @Html.TextAreaFor(m => m.Description, new { @class = "form-control characterlimit", @rows = 3, @maxlength = 2500 })
    <div class="text-muted mt-1" style="font-size: 12px; text-align:right;">2500 Character Limit</div>
</div>

脚本优化（可选） #

如果要更稳定地获取maxlength值，建议用prop()代替attr()，因为maxlength是DOM元素的原生属性：

$(".characterlimit").keyup(function () {
    var box = $(this);
    var max = box.prop("maxlength"); // 改用prop获取属性值
    var len = box.val().length;
    box.next().text((max - len) + " Characters Left");
});

方案说明 #

1. position-relative的作用：父容器设置相对定位后，内部元素的绝对定位会以父容器边界为参考，而非整个页面，让提示框位置和文本框的宽度范围绑定。
2. 移除栅格列类：col-md-*会给元素添加固定宽度和布局属性，导致提示框无法继承文本框的宽度范围，移除后提示框默认占满父容器宽度，text-align:right就能精准对齐文本框右侧。
3. mt-1的作用：用Bootstrap的margin类代替固定间距，保证提示框和文本框之间的间距自适应布局。

如果使用Bootstrap 5.x，也可以用官方规范的text-end类代替text-align:right：

<div class="text-muted mt-1 text-end" style="font-size: 12px;">2500 Character Limit</div>

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