css - 为什么我的菜单项在小屏幕上重叠？

Question

使用 CSS 网格，我的菜单项在大屏幕上正确显示，但在小屏幕上重叠。请问这是什么原因，我该如何解决？

我在这里只粘贴了 css 代码，您可以单击下面的链接查看完整代码，即 HTML 和 CSS。

完整源代码:http://jsfiddle.net/x89Lop5t/

CSS代码:

*{
  box-sizing:border-box;
}
body {
  background-color:#003EBB;
}
 /*styling the css grid container */
.container{
  display:grid;
  grid-template-columns: repeat(6 , 1fr);
  grid-auto-row: 150px;
  grid-gap:20px;
  align-items: center;
  grid-template-areas:
    ". . . . . mh"
    ". . nv nv nv ."
}

/*end of css grid container */


/*styling the grid items */
.miniHeader{
  grid-area:mh;
}
.miniHeader ul li{
  display:inline;
  margin-left:20px;
  list-style:none;
  margin-top:1px;

}


.miniHeader ul li a{
 text-decoration: none;
 color:white;

}

nav{
  grid-area: nv;
}

nav ul li{
  display:inline;
  border: 1px solid  white;
  border-radius: 10px;
  padding:10px;
  margin-left: 5px;

}

nav ul li a{
  color:white;
  padding:20px;
  text-decoration:none;

}

Answer 1

您必须使用 display:inline-block 进行导航，而不是使用 display:inline。您必须使用 display:inline 来设置内联元素的样式。

* {
  box-sizing: border-box;
}

body {
  background-color: #003EBB;
}


/*styling the css grid container */

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-row: 150px;
  grid-gap: 20px;
  align-items: center;
  grid-template-areas: ". . . . . mh" ". . nv nv nv ."
}


/*end of css grid container */


/*styling the grid items */

.miniHeader {
  grid-area: mh;
}

.miniHeader ul li {
  display: inline;
  margin-left: 20px;
  list-style: none;
  margin-top: 1px;
}

.miniHeader ul li a {
  text-decoration: none;
  color: white;
}

nav {
  grid-area: nv;
}

nav ul li {
  display: inline-block;
  border: 1px solid white;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 5px;
  margin-left: 5px;
}

nav ul li a {
  color: white;
  padding: 20px;
  text-decoration: none;
}

<div class="container">
  <div class="miniHeader">
    <ul>
      <li><a href="#loginsection">Login</a></li>
      <li><a href="#regsection">Register</a></li>
    </ul>
  </div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Map</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>