如何删除列表项的缩进

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

如何删除列表项的缩进

How to remove indentation of list items

html

css

jsp

listitem