ValidationSummary样式异常：首条错误居右其余居左，CSS设置无效求助

我来帮你搞定这个ValidationSummary的样式bug！你说的情况是第一条错误信息（"invalid Email Address"）显示在右侧，其余都在左侧，加了.toLeft类设置text-align:left却没效果，大概率是内部元素的样式优先级更高或者框架默认样式覆盖了你的设置，给你几个可行的解决方案：

1. 强制覆盖所有子元素的对齐样式 #

直接把.toLeft容器以及它内部的列表、列表项的对齐样式统一设置，确保没有漏网之鱼：

.validation-summary-valid { display: none; }
.toLeft, 
.toLeft ul, 
.toLeft li {
    text-align: left !important;
    /* 如果有浮动导致的对齐问题，顺便清除浮动 */
    float: none !important;
}
/* 你的其他样式... */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { 
    background-color: #你的颜色值;
}

这里用!important是为了确保你的样式优先级超过框架默认样式，如果测试后发现不需要可以去掉，先加上试试效果。

2. 用开发者工具定位问题根源 #

打开浏览器的开发者工具（按F12），选中那条居右的错误信息元素，查看它的CSS规则：

• 看看是不是有text-align:right或者float:right的样式被应用
• 检查你的.toLeft样式是不是被划掉了（划掉说明有更高优先级的样式覆盖了它）

比如你发现第一条错误的<li>有个默认类validation-summary-first-item，那可以针对性写样式：

.toLeft .validation-summary-first-item {
    text-align: left;
    float: none;
}

3. 检查是否存在内联样式 #

如果第一条错误信息的元素带有内联样式（比如<li style="text-align:right">），那要么用!important覆盖，要么找到生成这个内联样式的地方修改（比如后端代码或者框架的Validation配置）。

先试试第一种方案，应该能快速解决问题，如果不行再用开发者工具排查具体的样式冲突~

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