Question

我有一个难以解释的子导航栏错误，但基本上我在顶部有一个5类类别的栏，而其中只有一个具有子导航栏。我将整个栏设置为填充100％的屏幕，每个按钮填充20％，这对每个按钮都适用，除了上面带有子导航页面的按钮。如果您打开此html代码，即时消息发送tou将会明白我的意思。我不知道这是怎么回事。

IVE试图删除某些部分以查看是什么原因引起的问题，并且IVE试图将整个导航栏从身体切换到头部，以查看是否进行了任何操作，并且IVE在CSS上进行了很多尝试，但无济于事。

代码段：

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;

}
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: green;
}

.subnav-content {
  display: none;
  position: absolute;

  background-color: green;
  z-index: 1;
}

.subnav-content a {

  color: white;
  text-decoration: none;
}


.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


.subnav:hover .subnav-content {
  display: block;
}

<div class="navbar" style="width 100%">
  <a href="HOME.html"style="width:20%">Home</a>
  <a href="ABOUT.html"style="width:20%">About</a> 
  <a href="MEDIA.html"style="width:20%">Media</a>
  <div class="subnav">
    <button class="subnavbtn" style="width:20%">OtherGames</button>
    <div class="subnav-content">
      <a href="subHL.html">Half Life</a>
      <a href="subTF2.html">Team Fortress 2</a>
      <a href="subCS.html">Counter strike: Global Offensive</a>
    </div>
  </div>
   <a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>

Answer 1

您需要删除按钮上20％的宽度并将其应用于div.subnav，否则将是您当前看到的20％的20％。

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;

}
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: green;
}

.subnav-content {
  display: none;
  position: absolute;

  background-color: green;
  z-index: 1;
}

.subnav-content a {

  color: white;
  text-decoration: none;
}


.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


.subnav:hover .subnav-content {
  display: block;
}

<div class="navbar" style="width 100%">
  <a href="HOME.html"style="width:20%">Home</a>
  <a href="ABOUT.html"style="width:20%">About</a> 
  <a href="MEDIA.html"style="width:20%">Media</a>
  <div class="subnav"style="width:20%">
    <button class="subnavbtn">OtherGames</button>
    <div class="subnav-content">
      <a href="subHL.html">Half Life</a>
      <a href="subTF2.html">Team Fortress 2</a>
      <a href="subCS.html">Counter strike: Global Offensive</a>
    </div>
  </div>
   <a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>

Answer 2

更改宽度20% from a link to div.subnav，应用width:100% to button并添加此CSS

.navbar * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  width:100%;

}
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: green;
}

.subnav-content {
  display: none;
  position: absolute;

  background-color: green;
  z-index: 1;
}

.subnav-content a {

  color: white;
  text-decoration: none;
  display:block;
  float:none;
  text-align:left;
}


.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


.subnav:hover .subnav-content {
  display: block;
}

<div class="navbar" style="width 100%">
  <a href="HOME.html"style="width:20%">Home</a>
  <a href="ABOUT.html"style="width:20%">About</a> 
  <a href="MEDIA.html"style="width:20%">Media</a>
  <div class="subnav"style="width:20%">
    <button class="subnavbtn">OtherGames</button>
    <div class="subnav-content">
      <a href="subHL.html">Half Life</a>
      <a href="subTF2.html">Team Fortress 2</a>
      <a href="subCS.html">Counter strike: Global Offensive</a>
    </div>
  </div>
   <a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>

Answer 3

 /* The navigation menu */
.navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navigation links */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 0px;
  text-decoration: none;
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
}
.subnav-content a{
    padding: 14px 16px;
}
/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;

}
.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: green;
}

.subnav-content {
  display: none;
  position: absolute;

  background-color: green;
  z-index: 1;
}

.subnav-content a {

  color: white;
  text-decoration: none;
}


.subnav-content a:hover {
  background-color: #eee;
  color: black;
}


.subnav:hover .subnav-content {
  display: block;
}

 <div class="navbar" style="width 100%">
  <a href="HOME.html"style="width:20%">Home</a>
  <a href="ABOUT.html"style="width:20%">About</a> 
  <a href="MEDIA.html"style="width:20%">Media</a>
  <div class="subnav" style="width:20%">
    <button class="subnavbtn" style="width: 100%">OtherGames</button>
    <div class="subnav-content">
      <a href="subHL.html">Half Life</a>
      <a href="subTF2.html">Team Fortress 2</a>
      <a href="subCS.html">Counter strike: Global Offensive</a>
    </div>
  </div>
   <a href="ACCOUNT.html" Style="width:20%">Account</a>
</div>

Answer 4

元素<button class="subnavbtn" style="width:20%">OtherGames</button>具有内联width 20%，该内联应该在其父元素上，作为奖励，您应该申请， box-sizing: border-box;到.navbar a，因为否则您的填充将添加到您的宽度中，并减去此代码，这意味着元素的宽度为20％

奇怪的Subnav按钮错误

4 个答案: