css - ValidationSummary 错误消息不响应样式文本对齐 :left

Question

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

这里是截图更清楚首先出现无效的电子邮件地址

查看

.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;
    }
  
   

<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...

Answer 1

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

因为你包含了一个 li:last-child { float: right; }样式，您的最后一条错误消息显示在右侧。

由于您似乎只想将该样式应用于“保存”按钮，那么您应该为该按钮(或其 <li> 容器)提供一个 id属性，然后使用它来设置按钮的样式以使其向右浮动。

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