gpt4 book ai didi

html - 绝对定位忽略填充

转载 作者:太空狗 更新时间:2023-10-29 13:58:09 25 4
gpt4 key购买 nike

我正在尝试将带有按钮的 div 放置在具有填充的父 div 的底部。

current result

预期的结果是按钮位于填充(绿色区域)的顶部。

.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
a,
a:focus,
a:hover {
color: #fff;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("../img/blank.jpg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
html,
body {
height: 100%;
}
body {
color: #fff;
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
#mcontainer {
position: relative;
float: left;
padding: 10%;
width: 100%;
height: 100%;
}
#header h1 {
margin: 0px;
}
#header {
height: auto;
}
#footer .link-item a {
display: table-cell;
padding: 10px 10px;
border: 2px solid white;
}
#footer {
position: absolute;
top: auto;
bottom: 0%;
height: auto;
}
#footer .link-item:first-child {
border-spacing: 0px 10px;
margin: 10px 10px 10px 0px;
}
#footer .link-item {
border-spacing: 0px 10px;
margin: 10px 10px;
}
<!DOCTYPE html>
<html lang="en">

<body>
<div id="mcontainer">

<div id="header">
<h1>Text</h1>
</div>

<div id="footer">
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
<span class="link-item"><a href="www.google.com" target="new">Button</a> </span>
</div>

</div>
</body>

</html>

如有任何帮助,我们将不胜感激。

最佳答案

绝对定位不考虑填充。一个可能的解决方案是在 .mcontainer 中添加另一个容器,它也有 position: relative。这样,内部容器将遵守填充,并且绝对定位的元素将位于内部容器的底部。

关于html - 绝对定位忽略填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37461611/

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