如何在Blazor组件中将错误提示span固定在输入框正下方且不打乱布局

安全阿岳

2026-10-1

解决方案

第一步：调整Blazor组件结构

把错误提示span放到编辑状态下的floatingbox容器内部，利用父容器的position: relative属性做定位锚点：

@if (_editing)
{
    <div class="floatingbox position-relative">
        <input type="text" value="@AddText" @oninput="@(e => { AddText = e.Value.ToString(); })" 
        @onblur="@(e => { InputBlured(e); })" @onkeyup="@(e => KeyPressed(e))" maxlength="75" />
        <button type="button" class="button_search_term">
            <div @onclick="ProcessInput"><i class="fas fa-arrow-right"></i></div>
        </button>
        <!-- 错误提示放到相对定位的父容器内部 -->
        <span hidden="@IsShow" class="error-color">Error message</span>
    </div>
}
else
{
    <div class="floatingbox position-relative" @ondblclick="ToggleMode">
        <span>@AddText</span>
    </div>
}

第二步：修改CSS样式

使用绝对定位让错误提示脱离正常文档流，显示/隐藏都不会挤压原有控件位置，同时固定在输入框正下方：

/* 给父容器加底部内边距，预留错误提示显示空间，避免和下方元素重叠 */
.floatingbox {
    padding-bottom: 20px; /* 数值可根据错误提示的行高自行调整 */
}
.error-color{
    color:red;
    position: absolute;
    top: 100%; /* 顶部紧贴父容器底部，自然出现在输入框正下方 */
    left: 0;
    padding-left:35px; /* 和原有缩进逻辑保持一致 */
    line-height: 20px; /* 固定行高避免高度跳动 */
}