Question

我使用以下代码设置导航的样式：External codePen

/*--- Navigation Main ---*/
.nav {
  margin: 0px;
  background-color: rgb(200,216,239)
  
}

ul.topnav {
  display: block;
  list-style-type: none;
  margin: 0 450px 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  border-bottom: solid 1px
}

ul.topnav li {
  float: left;
}

ul.topnav li a {
  display: block;
  text-align: center;
  padding: 1px 15px;
  text-decoration: none;
  height: 65px;
  line-height: 70px;
}

ul.right {
  margin: auto;
  float: right;
  list-style-type: none;
  border-bottom: 1px
}

#club-name {
  border-bottom: 1px firebrick;
}

/*--- Navbar colors ---*/

ul.topnav li a:hover:not(.active) {
  background-color: rgb(144,149,158);
  color: rgb(198, 218, 238);
}


ul.topnav li a:active:not(.active) {
  background-color: rgb(46,53,66);
  color: rgb(198, 218, 238);
}


ul.topnav li a.active {
  background-color: firebrick;
}

/*--- Pseudoclasses ---*/

nav a:link {
  color: rgb(144,149,158);
  text-decoration: none;
}

a:visited {
  color: rgb(144,149,158);
}

/*--- Small Screen view ---*/
@media (max-width: 600px){
  nav {
    margin: 0px;
  }
  
  ul.right,
  ul.topnav li {
    float: none;
    text-align: center;
  }
}

/*--- fonts ---*/
#club-name {
  font-family: Bevan;
  font-size: 20px;
  color: aliceblue
}

ul.topnav ul.right li {
  font-family: Pontano Sans;
  font-size: 20px;
  font-weight: bolder;
}

<div class="nav">
  <ul class="topnav">
    <li><a id="club-name" class="active" href="index.html">Hercules</a></li>
    <ul class="topnav right">
      <li><a href="#">The Team</a></li>
      <li><a href="#">Facilities</a></li>
      <li><a href="#">Membership</a></li>
    </ul>
  </ul>
</div>

我的样式按照我的要求工作，直到我设置ul.topnav { margin: 0 350px 0; }。

如果您将此margin更新为0并使窗口变小，您将看到我之前获得的效果，但是一旦我应用了边距，可折叠效果就不再起作用了。

希望有人可以提供帮助，或者为我提供不同的解决方案。

Answer 1

当您将ul.topnav边距设置为350px时，ul.topnav li元素开始相互碰撞，并在屏幕尺寸变小时到达断点之前进行换行。通过将ul.topnav的边距设置为0 auto，然后将此元素的max-width设置为800px，您可以获得类似于应用边距之前的效果} 或者。这会在屏幕尺寸较大的ul.topnav的两侧提供一些空间，确保ul.topnav li元素在较小的屏幕尺寸下不会过于挤压，并允许断点按预期工作。 / p>

此解决方案中ul.topnav的CSS如下所示：

    ul.topnav {
        display: block;
        list-style-type: none;
        margin: 0 auto;
        max-width: 800px; 
        padding: 0;
        overflow: hidden;
        position: relative;
        border-bottom: solid 1px
    }

可折叠导航不适用于保证金 - 为什么？

1 个答案: