如何删除列表项的缩进

Question

我将padding-left设置为零，margin-left设置为零，但我的列表项仍然是缩进的，而我希望它们与h2元素对齐。我的代码和问题截图：

我的login.jsp：

<!-- Welcome page options -->
    <div class="homepageNavButtons">
        <h2 id="loginLabel" class="homepageOptionsText">Welcome to the SGA web application. Choose
            an option:</h2>
        <ul class="homepageNavButtonsList">
            <li><a class="loginOptions"
                href="${pageContext.request.contextPath}/menu" tabindex="1">
                    Click here to login</a></li>
            <li><a class="registerOptions"
                href="${pageContext.request.contextPath}/register" tabindex="2">Click
                    here to register </a></li>
        </ul>
    </div>

我的css：

.homepageNavButtons {
    width: 70%;
    background-color: gray;
    position: relative;
    top: 70px;
    margin: auto;
}

.homepageNavButtonsList ul {
    margin-left: 0;
    padding-left: none;
    list-style: none;
}

.homepageNavButtonsList li {
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
    margin-left: 0;
    padding-left: none;
    list-style: none;
    padding: 0;
}

.loginOptions {
    color: blue;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 16px;
}

.registerOptions {
    color: blue;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 16px;
}

Answer 1

您没有选择ul来删除其所有样式。试试这个：

ul.homepageNavButtonsList {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.homepageNavButtonsList ul padding-left: none ul当然你.homepageNavButtonsList

内没有任何{{1}}