javascript - 在网页顶部显示验证摘要时控件定位不正确

Question

我在 asp.net 页面中使用自定义验证器函数并使用 CSS 样式在网页顶部显示验证摘要时遇到奇怪的问题......

这是单击按钮提交更改前的屏幕截图

提交页面后，验证摘要显示在顶部，但控件位置正在这样变化

这是我的代码

    <div id="validationSummaryHolder" class="validationSummaryHolder">
            <asp:ValidationSummary runat="server" ID="valsErrors" ValidationGroup="TestValidation" DisplayMode="BulletList"
                CssClass="validationsummary" HeaderText="<div class='validationheader'>Please correct the following:</div>" />        
        </div>

这是我用于验证摘要的 css 样式

用于验证摘要的 Css 样式

.validationheader 
{
background-color: white;
color:green;
height: 14px;
font-weight: bold;
border-bottom: 1px solid #b08b34;
padding-top: 3px;
}
.validationsummary 
{
border: 1px solid #b08b34;
padding: 0px 0px 0px 0px;
margin:5px 0 20px 0px;
font-size:12px;
width:99%;
}
.validationsummary ul 
{
padding-top: 1px;
font-size: 12px;
color:#982b12;
}
.validationsummary ul li 
{
padding: 1px 0px 0px 1px;
}

我已将所有控件放在单独的 div 中，并提到所有控件的位置类型是相对 ..

我不知道为什么我会得到这个奇怪的东西， 我需要为总页设置固定的高度和宽度吗？有人可以帮忙吗非常感谢……

Answer 1

检查宽度

<div id="validationSummaryHolder" class="validationSummaryHolder">

验证摘要的内部不太可能自行引起任何问题，因为它们包含在该 div 中，但可能包含的 div 正在拉伸(stretch)或收缩页面。问题中的一些 html 也会有所帮助。如果您不能在此处解释 html，另一种选择是显示包含和不包含验证摘要的页面线框，此时答案应该很清楚。