导航结束

Question

我有一个小导航，响应不起作用，我无法弄清楚为什么，它包装到第二行，但CSS中没有任何实际设置宽度，所以它不应该发生; the url is here

我尝试设置不同的宽度，填充...它有时似乎可以工作，但是一旦我玩窗口它再次变得好像我什么都没改变，所以它一直让我迷失。

当然，我的不好，我只是想表明视觉问题，如果有一些想法会发生。

我使用的导航就是这个：

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

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

Answer 1

您必须将overflow:hidden;应用于包含ul：

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

使用浮动元素（在您的情况下为li）时，最好将overflow:hidden设置为容器（父级）。此规则强制容器环绕所有子项，而不是高度为0px并导致奇怪的问题。

修改 似乎导致它的原因是<div class="table">你在这个div上设置了display:table，导致它再次使屏幕变宽时不会返回到它的全宽。删除此规则并更新设计以使用其他方式使导航居中。

Answer 2

所以最后我得到它的工作，感谢Yotam Omer，我删除了display：table，然后将它包装在一个div中，我与text-align：center对齐，同时删除了float：left on the 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;
    }
}

感谢您的帮助。 ：）