为什么我的导航栏在我的导航栏中没有完全伸展到左侧？
为什么我的导航栏一直伸到左边？
这就是我所说的:
我的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;
}
你仍然有适用于你的填充ul.如果没有重置或规范化样式表,无序列表将保持固有的填充.
nav ul {
margin: 0 auto;
padding: 0; /** This will remove the space */
}