Question

为什么我的导航栏一直向左伸展？

以下是我所说的：

Output

我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="css.css" rel="stylesheet" style="text/css">
</head>
<body>
    <div id="main">
        <nav>
            <ul>
                <li><a href="index.html">surfing 101</a></li>
                <li><a href="teknikker.html">teknikker</a></li>
                <li><a href="dønninger.html">dønninger</a></li>
                <li><a href="brettyper.html">brettyper</a></li>
                <li><a href="destinasjoner">destinasjoner</a></li>
                <li><a href="lenker.html">lenker</a></li>
            </ul>
        </nav>
        <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </div>
</body>
</html>

我的CSS：

body {
    background-color: #DCDCDC;
}

#main {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

nav {
    margin: 0;
    width: 100%;
    background-color: #FFF;
}

nav ul {
    margin: 0 auto;
}

nav li a {
    background-color: #337656;
    display: block;
    font-size: 1em;
    text-decoration: none;
    color: #FFF;
    padding: 1em;
}

nav li a:visited {
    background-color: #337656;
    display: block;
    font-size: 2em;
    text-decoration: none;
    color: #FFF;
}

nav li a:hover {
    background-color: #2E744D;
}

section {
    background-color: #9999FF;
    float: left;
    width: 100%;
}

li {
    width: 50%;
    list-style-type: none;
    float: left;
    text-align: center;
}

Answer 1

您的ul仍然应用了填充。如果没有重置或规范化样式表，无序列表将保持固有的填充。

nav ul {
  margin: 0 auto;
  padding: 0; /** This will remove the space */
}

Codepen sketch

为什么我的导航栏在我的导航栏中没有完全伸展到左侧？

1 个答案: