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