Question

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

我仅在此处粘贴了CSS代码，您可以单击下面的链接以查看整个代码，即HTML和CSS。

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>

Answer 2

使用display:inline-block代替display:inline。

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

为什么菜单项在小屏幕上重叠？

2 个答案: