Removing <ul> <li> tag in validation-summary-errors

Question

I have this site that the error message is on this format

<div class="validation-summary-errors">
    <span>Password change was unsuccessful. Please correct the errors and try again.</span>
    <ul>
        <li>The current password is incorrect or the new password is invalid.</li>
    </ul>
</div>

Now I want to override the class "validation-summary-errors" to get rid of the 'ul' 'li' to have if line in the above error message inside the "span" tag. So I have the following code as shown below:

<style type="text/css">
    .validation-summary-errors li { 
        list-style: none;
        margin: 0;
        padding: 5px -10px 5px 0px;
    }
</style>

But the code above seems not working. How to fix this issue.

thanks

Answer 1

Apply list-style property on ul not li. So try something like this

.validation-summary-errors ul { 
        list-style: none;
        margin-left:-40px
    }

Answer 2

You want to make the span and ul/li messages inline?

Try the following:

.validation-summary-errors ul, .validation-summary-errors li { 
    list-style: none;
    display: inline;
    padding: 0;
}