子元素的边界影响父元素的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;
}

＆＃13;

＆＃13;

/** 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

另一种解决方案 -

对于.navigation_menu li:hover，请添加margin-bottom: -2px;，然后移除overflow: hidden;的{​​{1}}

Answer 3

添加.navigation_menu li - border-bottom: 2px solid transparent;

＆＃13;

＆＃13;

/** 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: 2px solid white;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用伪元素:before或:after

＆＃13;

＆＃13;

/** 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;
    position: relative;
}

.navigation_menu li:hover:before {
	content: '';
    position: absolute; bottom: 0; left: 0;
    width: 100%;
    height: 2px;
    background: #fff;       
}



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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;