導航包裝

Question

所以我有一個小導航，響應..不起作用，我不明白爲什麼，它包裝到第二行，但沒有什麼在實際上設置寬度的CSS所以它不應該發生.. the url is here

我試着設置不同的寬度，填充..它有時似乎工作，但只要我玩窗口它再次像我沒有改變任何東西，所以它繼續得到我輸了。 我會很感激這方面的任何指示。

當然，我的壞，我只是想顯示視覺問題，如果一些想法會發生。

導航我用的就是這個，

<section> 
    <div class='nav-wrapper'> 
    <div class='table'> 
     <nav id="nav" role="navigation"> 
      <a href="#nav" title="Show navigation">Show navigation</a> 
      <a href="#" title="Hide navigation">Hide navigation</a> 
      <ul> 
       <li><a href="/">Home</a></li><!--Blog--> 
       <li><a href="/">Profile</a></li> 
       <li><a href="/">Web Design</a></li> 
       <li><a href="graphicdesign.php">Graphic Design</a></li> 
       <li><a href="/">Resources</a></li> 
      </ul> 
     </nav> 
    </div> 
    </div> 
    </section> 

而CSS是現在很簡單

.nav-wrapper{ 
padding: 5% 0; 
} 

.table{ 
display: table; 
margin: 0 auto; 
padding:0; 
} 

#nav{ 
/* container */ 
} 
#nav > a{ 
    display: none; 
} 
#nav li 
{ 
    position: relative; 
} 

/* first level */ 

#nav > ul{ 
    list-style-type: none; 
    max-width: 100%; 
    margin: 0; 
    padding: 0; 
} 
    #nav > ul > li 
    { 
     margin: 0; 
     padding: 0 2%; 
     font-family: 'helvetica neue', arial, sans-serif; 
     text-transform: uppercase; 
     float: left; 
     font-size: 0.8em; 
    } 

/* second level */ 

#nav li ul{ 
    display: none; 
    position: absolute; 
    top: 100%; 
} 
    #nav li:hover ul 
    { 
     display: block; 
    } 

@media only screen and (max-width: 40em){/* 640 */ 

#nav{ 
    position: relative; 
} 
    #nav > a{ 
    } 
    #nav:not(:target) > a:first-of-type, 
    #nav:target > a:last-of-type 
    { 
     display: block; 
    } 

/* first level */ 

#nav > ul{ 
    height: auto; 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 
    #nav > ul.active{ 
     display: block; 
    } 
    #nav > ul > li{ 
     width: 100%; 
     float: none; 
    } 


/* second level */ 

    #nav li ul{ 
     position: static; 
    } 
} 

Answer 1

你將不得不申請overflow:hidden;到含ul：

#nav > ul { 
    list-style-type: none; 
    max-width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; /* Add this line */ 
} 

當使用浮動元素（li在您的cas e）將overflow:hidden設置爲容器（父級）總是更好。此規則強制容器纏繞所有的孩子，而不是具有0px的高度並導致奇怪的問題。

編輯：使屏幕寬時再次 什麼似乎保持使其爲<div class="table">你已經設置這個div導致它不會返回到它的display:table的整個寬度。刪除此規則並更新設計，以另一種方式對導航進行居中。

Answer 2

因此，最後我得到它的工作，感謝Yotam Omer，我刪除了display：table，然後將其包裹在一個div中，我與text-align：center對齊，也刪除了float：left li和ul上的最大寬度，並且它工作得很完美。我在這裏解釋它是否可以幫助未來的人。我粘貼最終的代碼。

<section> 
<div class='nav-wrapper'> 
    <nav id="nav" role="navigation"> 
     <a href="#nav" title="Show navigation">Show navigation</a> 
     <a href="#" title="Hide navigation">Hide navigation</a> 
     <ul> 
      <li><a href="/">Home</a></li><!--Blog--> 
      <li><a href="/">Profile</a></li> 
      <li><a href="/">Web Design</a></li> 
      <li><a href="graphicdesign.php">Graphic Design</a></li> 
      <li><a href="/">Resources</a></li> 
     </ul> 
    </nav> 
</div> 
</section> 


.nav-wrapper{ 
padding: 5% 0; 
text-align:center; 
} 

#nav{ 
/* container */ 
} 
#nav > a{ 
    display: none; 
} 
#nav li 
{ 
    position: relative; 
} 

/* first level */ 

#nav > ul{ 
    list-style-type: none; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 
    overflow: hidden; 
    display:inline-block; 
} 
    #nav > ul > li 
    { 
     display:inline; 
     margin: 0; 
     padding: 0 2%; 
     font-family: 'helvetica neue', arial, sans-serif; 
     text-transform: uppercase; 
     font-size: 0.8em; 
    } 

/* second level */ 

#nav li ul{ 
    display: none; 
    position: absolute; 
    top: 100%; 
} 
    #nav li:hover ul 
    { 
     display: block; 
    } 

@media only screen and (max-width: 40em){/* 640 */ 

#nav{ 
    position: relative; 
} 
    #nav > a{ 
    } 
    #nav:not(:target) > a:first-of-type, 
    #nav:target > a:last-of-type 
    { 
     display: block; 
    } 

/* first level */ 

#nav > ul{ 
    height: auto; 
    display: none; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 
    #nav > ul.active{ 
     display: block; 
    } 
    #nav > ul > li{ 
     width: 100%; 
     float: none; 
    } 


/* second level */ 

    #nav li ul{ 
     position: static; 
    } 
} 

謝謝你的幫助。 :)