html - 子元素的边框影响父元素的div大小

Question

我这样做是为了当我将鼠标悬停在菜单中的某个元素时，它下面会出现一条小线:border-bottom: 2px;。现在，当我将元素悬停在菜单中时，父元素(在本例中为标题)也会在底部增长 2px。

我的 HTML 代码:

<div class="header"> 

    <nav class="navigation_menu">

            <ul class="navigation_ul">

                <a href="#"><li>Lorum</li></a>
                <a href="#"><li>Ipsum</li></a>
                <a href="#"><li>Lorpsum</li></a>
                <a href="#"><li>Ipum</li></a>
                <a href="#"><li>Nadoa</li></a>

            </ul>

    </nav>

</div>

我的 CSS 代码:

body {
    background:f5f5f5;
    margin: 0px;
    padding: 0px;
    font-family: roboto;
}

/** Text Style **/

a {
    text-decoration: none;
    color: inherit;
}

/** Header Style **/

.header {
    background: #607d8b;
    margin: 0px;
    padding: 10px;
    padding-bottom: 50px;
    color: white;
}

/** Navigation Menu Style **/

.navigation_menu ul {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

.navigation_menu li {
    font-size:18px;
}

.navigation_menu li:hover {
    border-bottom: 2px solid white;
}

.navigation_menu ul li {
    display: inline-block;
    padding: 0px 0px;
}

这是一个示例: http://codepen.io/anon/pen/rVjJqW

希望能在这里找到答案!提前致谢!

Answer 1

问题是边框占用了一些空间，所以父级变大了。

相反，您可以考虑设置透明边框并在悬停时更改颜色:

.navigation_menu li {
  border-bottom: 2px solid transparent;
}
.navigation_menu li:hover {
  border-bottom-color: white;
}

/** General Style **/
body {
  background: f5f5f5;
  margin: 0px;
  padding: 0px;
  font-family: roboto;
}

/** Text Style **/
a {
  text-decoration: none;
  color: inherit;
}

/** Header Style **/
.header {
  background: #607d8b;
  margin: 0px;
  padding: 10px;
  padding-bottom: 50px;
  color: white;
}

/** Navigation Menu Style **/
.navigation_menu ul {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}
.navigation_menu li {
  font-size:18px;
  border-bottom: 2px solid transparent;
}
.navigation_menu li:hover {
  border-bottom-color: white;
}
.navigation_menu ul li {
  display: inline-block;
  padding: 0px 0px;
}

<div class="header"> 
  <nav class="navigation_menu">
    <ul class="navigation_ul">
      <a href="#"><li>Lorum</li></a>
      <a href="#"><li>Ipsum</li></a>
      <a href="#"><li>Lorpsum</li></a>
      <a href="#"><li>Ipum</li></a>
      <a href="#"><li>Nadoa</li></a>
    </ul>
  </nav>
</div>