gpt4 book ai didi

html - box-sizing 不适用于 li with inline-block

转载 作者:行者123 更新时间:2023-11-28 15:12:26 25 4
gpt4 key购买 nike

我不知道为什么,但只有在我的页脚上,内联 block 中有 li,事件类中有 b​​order-top,我的 box-sizing : border-box 不起作用。

当类处于事件状态时,有一个 border-top,我们看到底部有一个缺口。

举个例子:

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

我该如何解决这个问题?

谢谢!

最佳答案

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

关于html - box-sizing 不适用于 li with inline-block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48586506/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com