Question

我的代码（第二个演示）和工作代码（第一个演示）在本质上是相同的，但是我认为代码中的悬停效果是在尊重父元素的填充，并且不允许子元素长高。为什么在第一个演示（橙色背景）中没有发生这种情况，我该如何解决？请注意，已添加边框用于调试。

编辑：我找到了原因。这是由于.menu a中的float：left所致。谁能解释为什么？我知道float：left将元素放置在容器的左侧，但是为什么这会在下面产生不良效果呢？对于一个人为什么暗示另一个的解释，我无法解决。

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
div {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid blue;
}

#nav-3 {
  background: #EEA200;
}

.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;

}
.link-3:hover {
  background-color: #eeeeee;
  color: #EEA200;
  padding: 24px 10px;
}

<div id="nav-3">
    <a class="link-3" href="#">Home</a>
    <a class="link-3" href="#">About</a>
    <a class="link-3" href="#">Contact</a>
    <a class="link-3" href="#">Shop</a>
</div>

.header {
  height: 50px;
  background-color: #008b10;
}


.menu {

padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}

 .menu a:hover {

background-color: #ffffff;
color: #008b10;
padding: 16px 5px;

}

.menu a {
/*box-sizing: border-box;*/
float: left;
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}

<div class=header>
        <div class="menu">
            <a class="help" href="#" id="online_help">Help</a>
            <a class="logout" href="#" onclick="openLogout();">Logout</a>
        </div>
</div>

Answer 1

.header {
  background-color: #008b10;
}


.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
overflow: visible;
border: 1px solid blue;
}

.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
margin: 0 10px;
}
.menu a:hover {
  background-color: #ffffff;
  color: #008b10;
  padding: 16px 5px;
}

<div class=header>
        <div class="menu">
            <a class="help" href="#" id="online_help">Help</a>
            <a class="logout" href="#" onclick="openLogout();">Logout</a>
        </div>
</div>

仅因为float：left指定了沿容器左侧放置的元素。

由于父代填充，子代仅向一个方向（向下）生长。文字在悬停时向下移动

1 个答案: