爲什麼我的導航欄不能完全伸展到導航欄的左側？

下面是我所說的：

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; 
}

來源

2013-08-30 hburn

哪裏是在''html'＃main'？ – Vector

你仍然需要應用到你的ul填充。沒有重置或標準化樣式表，無序列表將保持固有的填充。

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

Codepen sketch

來源

2013-08-30 19:52:07 kunalbhat

爲什麼我的導航欄不能完全伸展到導航欄的左側？

回答

相關問題