Question

我正在开发一个项目来创建响应式导航菜单。我现在的目标是让Nav Menu切换从顶部显示到平板设备侧面显示（屏幕宽度低于800px）。

在我的媒体查询中，我通过设置float：initial将李恢复为垂直对齐;并设置了float：left;对于main-nav div和float：right;对于内容div。但是，由于某种原因，内容div仍然堆叠在主导航div下。

＆＃13;

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border:none;
}

.content {
  width:100%;
  max-width:1000px;
  margin:auto;
}

.main-nav {
  width:100%;
  max-width:1000px;
  height:40px;
  background-color:#004d99;
  color:#ffffff;
  margin-top:0px;
  margin-bottom:0px;
  margin-left:auto;
  margin-right:auto;
  border:none;
  border-collapse:collapse;
}

.main-nav ul {
  float:right;
  margin-top:0px;
  margin-bottom:0px;
  list-style-type:none;
  padding: 0px;
  border:none;
  border-collapse:collapse;
}

.main-nav li a {
  display:block;
  color:#ffffff;
  font-family:arial,helvetica,sans-serif;
  text-decoration:none;
}

.main-nav li {
  float:left;
  padding: 10px 10px 10px 10px;
  background-color:#004d99;
  color:#ffffff;
  border:none;
  border-collapse:collapse;
  margin:0px;
}

.main-nav li:hover {
  background-color:#0073E5;
}

.header {
  width:100%;
  height:auto;
}

.header img {
  width:100%;
}

/*Tablet Screens*/
@media only screen and (max-width:800px) {
  .main-nav {
    width:200px !important;
    height:800px !important;
    margin-right:0px !important;
    margin-left:0px !important;
    overflow:hidden;
    float:left !important;
    clear:none !important;
  }
  
  .main-nav ul {
    float:left !important;
    width:100% !important;
    height:auto !important;
  }
  
  .main-nav li {
    float:initial !important;
    width:100% !important;
    height:auto !important;
  }
  
  .content {
    float:right !important;
    clear:none !important;
  }
}

/*Mobile Screens*/
@media only screen and (max-width:600px) {
  .main-nav {
    display:none !important;
  }
}

＆＃13;

<body>
  <div class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Page01</a></li>
      <li><a href="#">Page02</a></li>
      <li><a href="#">Page03</a></li>
      <li><a href="#">Page04</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="header">
      <img src="http://res.cloudinary.com/dgvvgqr2q/image/upload/v1456519063/5D4487FB-D2A2-4A96-8113-C671577B1DC1-header_tojssi.jpg" />
    </div>
  </div>
</body>

＆＃13;

如果你想要玩我的代码，我在这里有一个CodePen ... http://codepen.io/amobley1108/pen/JXPmpL

Answer 1

希望有所帮助。我不喜欢推翻CSS样式，所以我把你的大部分导航放到另一个媒体查询＆gt; 800像素

body {
  border:none;
  font-family:arial,helvetica,sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
  margin:auto;
  max-width:1000px;
}

.main-nav {
  background-color:#004d99;
  color:#ffffff;
}

.main-nav ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
}

.main-nav li a {
  color:#ffffff;
  display:block;
  line-height: 40px;
  padding: 0 10px;
  text-decoration:none;
}

.main-nav li:hover {
  background-color:#0073E5;
}

.header {
  height:auto;
  width:100%;
}

.header img {
  width:100%;
}

/*Desktop Screens*/
@media only screen and (min-width:800px) {
  .main-nav {
    height:40px;
  }

  .main-nav ul {
    float:right;
  }

  .main-nav li a {
    color:#ffffff;
    display:block;
    line-height: 40px;
    padding: 0 10px;
    text-decoration:none;
  }

  .main-nav li {
    float:left;
  }
}
/*Tablet Screens*/
@media only screen and (min-width:600px) and (max-width:800px) { 
  .main-nav {
    float: left;
    min-height: 100vh;
    width:200px;
  }   
  
  .content {
    float:right;
    width: calc(100% - 200px)
  }
}

/*Mobile Screens*/
@media only screen and (max-width:600px) {
  .main-nav {
      display:none;
  }
}

<body>
  <div class="wrapper">   
    <div class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Page01</a></li>
        <li><a href="#">Page02</a></li>
        <li><a href="#">Page03</a></li>
        <li><a href="#">Page04</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="header">
        <img src="http://res.cloudinary.com/dgvvgqr2q/image/upload/v1456519063/5D4487FB-D2A2-4A96-8113-C671577B1DC1-header_tojssi.jpg" />
      </div>
    </div>
  </div>
</body>

响应式导航菜单项目 - 两个div彼此相邻

1 个答案: