ValidationSummary错误消息未响应样式text-align：left

Question

每个第一个ValidationSummary错误消息显示在右侧，其他显示在左侧。 我试图为它添加类，我已经将css text-align：left设置为类但没有任何改变

这里的截图更加清晰 首先显示无效的电子邮件地

查看

＆＃13;

＆＃13;

.validation-summary-valid {
        display: none;
    }
    .toLeft{
        text-align:left;
    }
    
/*To change the color of selected tab*/
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        background-color: #E8E8E8;
    }
    /*To set submit button right*/
    li:last-child {
        float: right;
    }

    table {
        border-collapse: separate;
        border-spacing: 0;
    }

    td {
        position: relative;
        padding: 15px;
    }

    td {
        left: 10px;
    }

        td:first-child {
            left: 0px;
        }

        td:nth-child(3) {
            left: 20px;
        }

    a {
        font-weight: bold;
    }
  
   

＆＃13;

<h2>Add</h2>

<hr>

@using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{

    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.Id)
    @Html.ValidationSummary(string.Empty, new { @class = "alert alert-danger toLeft" })
<br>
    <div id="wizard">
    // other code...

＆＃13;

＆＃13;

＆＃13;

Answer 1

@Html.ValidationSummary()为每条错误消息生成<ul>个<li>元素。

由于您已添加li:last-child { float: right; }样式，因此您的上一条错误消息将显示在右侧。

由于您似乎只希望将该样式应用于“保存”按钮，因此您应该为该按钮（或其<li>容器）提供id属性，然后使用该按钮设置样式漂浮到右边。

您也可以删除toLeft中的@Html.ValidationSummary()类以及相关的.toLeft { text-align:left; }样式，因为它默认为左对齐。