为什么按钮的位置会影响列表的位置？
为什么按钮的位置会影响列表的位置？
提问于 2014-12-19 03:12:09
我正在使用html和css制作一个网页，并在页面底部放置了一个水平列表，但当我在页面中心添加一个按钮时，它会将列表推到页面的下方。
.navigation {
max-width: 700px;
margin: 0 auto;
margin-top: 700px;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 5px;
width: 100%;
font-family: "calibri";
}
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #fce2c1;
-webkit-box-shadow: inset 0px 0px 0px 0px #fce2c1;
box-shadow: inset 0px 0px 0px 0px #fce2c1;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF9933), color- stop(1, #fb9e25));
background: -moz-linear-gradient(center top, #FF9933 5%, #fb9e25 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr='#FF9933', endColorstr='#fb9e25');
background-color: #FF9933;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 0px;
display: inline-block;
color: #00000;
font-family: Arial;
font-size: 35px;
font-weight: bold;
font-style: normal;
height: 90px;
line-height: 100px;
width: 500px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #cc9f52;
margin-left: 550px;
margin-top: 300px;
}<!DOCTYPE html>
<title>website</title>
<body>
<a href="#" class="button">UPLOAD</a>
<div class="navigation">
<ul>
<li><a href="">Sign Up</a>
</li>
<li><a href="">Login</a>
</li>
<li><a href="">Contact</a>
</li>
<li><a href="">About Us</a>
</li>
<li><a href="">RFR</a>
</li>
</ul>
</div>
</body>
回答 3
Stack Overflow用户
发布于 2014-12-19 03:18:48
你的类导航的页边距-顶部: 700px，这意味着它想要将自己定位在你添加的按钮下面700px。因此，当页面为空时，您的导航会将自己定位在屏幕顶部以下700px的位置(因为屏幕上没有其他元素)，但当按钮被引入时，您的导航定位在其下方700px。
我猜你正在寻找一个‘粘性页脚’(导航将出现在空白屏幕的底部，但如果你有一个充满内容的页面，则需要向下滚动)，或者可能是一个固定位置的页脚(总是在屏幕的底部)。
要实现固定脚注，您可以按如下方式更改导航类：
.navigation {
max-width: 700px;
margin: 0 auto;
bottom: 0;
position:absolute;
}bottom:0;意味着你想让你的导航从屏幕底部算起是0px。position:fixed告诉元素使用浏览器窗口来定位自己，而不是使用其他元素(如按钮)。
在这个jsfiddle上查看它
Stack Overflow用户
发布于 2014-12-19 03:23:26
将导航边距-top的值更改为200px或更低。
.navigation {
max-width: 700px;
margin: 0 auto;
margin-top: 200px;Stack Overflow用户
发布于 2014-12-19 03:28:41
@zigg76如果你的目标是一个粘性的页脚，你可以使用下面的css并对其进行编辑，使其符合你的要求
.myfooter
{
position:fixed;
bottom:0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27559211
复制相关文章
相似问题
为什么位置绝对会影响混浊？
为什么位置属性会影响显示属性？
为什么{位置会影响这个Javascript代码？
按切换按钮会影响jQuery中div的位置
为什么跨度会影响同级跨距的垂直位置？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
