0

我不知道为什么，但只有在我的页脚中，li 在 inline-block 和活动类的border-top 中，我的 box-sizing : border-box 不起作用。

当课程处于活动状态时，顶部有一个边框，底部有一个间隙。

这里有一个例子：

* { box-sizing: border-box }
#header{
	position:absolute;
	top:0;
	right:0;
	left:0;
	background-color:#333c45;
	height:60px;
	line-height:60px; 
}
#corp{
	position:absolute;
	top:60px;
	bottom:60px;
	right:0;
	left:0;
	background-color:#CDCDCD;
}
#footer{
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	background-color:#333c45;
	height:60px;
	line-height:60px;
		
}
#footer li{
	display:inline-block;
	width:45%;
}
ul{
	margin:0;
	padding:0;
}
.active{
	color:#05FF01;
	border-top:2px solid #05FF01;
}
<html>
<head>
</head>
<body>
<div id="header">
test 
</div>
<div id="corp">
</div>
<div id="footer">
<ul>
<li class="active">boutton 1</li>
<li>boutton 2</li>
</ul>
</div>
</body>
</html>

我怎么解决这个问题 ？

谢谢 ！

4

2 回答 2

0

box-sizing确定如何解释高度和宽度属性的指定值，但您的li元素没有高度属性。它们的高度只是顶部边框高度和内容框高度的总和，内容框高度是根据行高自动计算的。

于 2018-02-02T16:17:29.077 回答
-1

添加overflow:hidden到正文中。它将阻止任何垂直滚动条。

另外，作为旁注，IMO 用每个元素制作布局position:absolute是一个糟糕的主意，你很快就会头疼。

* {
  box-sizing: border-box
}

body {
  overflow: hidden;
}

#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#corp {
  position: absolute;
  top: 60px;
  bottom: 60px;
  right: 0;
  left: 0;
  background-color: #CDCDCD;
}

#footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #333c45;
  height: 60px;
  line-height: 60px;
}

#footer li {
  display: inline-block;
  width: 45%;
}

ul {
  margin: 0;
  padding: 0;
}

.active {
  color: #05FF01;
  border-top: 2px solid #05FF01;
}
<html>

<head>
</head>

<body>
  <div id="header">
    test
  </div>
  <div id="corp">
  </div>
  <div id="footer">
    <ul>
      <li class="active">boutton 1</li>
      <li>boutton 2</li>
    </ul>
  </div>
</body>

</html>

于 2018-02-02T16:09:42.763 回答