-1

我有一个小的导航，响应不工作，我不知道为什么，它包裹到第二行，但 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;
  }
}
<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>

4

2 回答 2

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">你display:table在这个 div 上设置了它，这导致它在再次使屏幕变宽时不会返回到它的全宽。删除此规则并更新设计以另一种方式居中导航。

于 2013-07-11T23:47:34.520 回答
0

所以最后我让它工作了，感谢 Yotam Omer，我删除了 display:table，然后将它包裹在一个我与 text-align:center 对齐的 div 中，还删除了 li 上的 float:left，以及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;
    }
}

感谢您的帮助。:)

于 2013-07-12T19:00:46.097 回答