1

为什么我的导航栏没有一直向左延伸？

这就是我所说的：

输出

我的 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;
}
4

1 回答 1

6

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

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

Codepen 草图

于 2013-08-30T19:52:07.347 回答