我不知道为什么,但只有在我的页脚上使用li in inline-block和border-top on active class,我的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>
我该如何解决这个问题?
谢谢!
答案 0 :(得分:0)
box-sizing
确定如何解释height和width属性的指定值,但是li
元素没有height属性。它们的高度只是顶部边界高度和内容框高度的总和,它是从行高自动计算出来的。
答案 1 :(得分:-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>