为什么我的按钮位置会影响列表的位置？

我正在制作一个使用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>

来源

2014-12-19 zigg76

你的类导航具有的margin-top：700像素，这意味着，它想把自身定位700像素您要添加的按钮下方。因此，当页面为空时，导航会将自己定位在屏幕顶部以下700px（因为屏幕上没有其他元素），但是当按钮被引入时，导航位于其下方700px处。

我猜你正在寻找一个'粘脚'（其中导航将出现在空白屏幕的底部，但会要求你向下滚动，如果你有一个页面充满内容）或可能是一个页脚位置固定（始终位于屏幕底部）。

要实现一个固定的页脚，你可以改变你的导航类，如下所示：

.navigation { 
    max-width: 700px; 
    margin: 0 auto; 
    bottom: 0; 
    position:absolute; 
}

bottom:0;意味着你要你的资产净值从屏幕底部0像素。 position:fixed告诉元素使用浏览器窗口定位自己，而不是其他元素（如按钮）。

检查出来这个jsfiddle

来源

2014-12-19 03:18:47

谢谢，但我会如何解决在该位置屏幕的底部，然后不使用margin-top：700px？ – zigg76 2014-12-19 03:23:33

我用一个例子更新了答案。关键在于，如果您使用margin-top，则它将自身相对于其上方的元素进行定位。 – 2014-12-19 03:31:05

改变导航的margin-top的价值200像素或更低。

.navigation { 
max-width: 700px; 
margin: 0 auto; 
margin-top: 200px;

来源

2014-12-19 03:23:25 dabxiiz30

@ zigg76如果你瞄准了一个棘手的页脚，你可以使用下面的CSS和编辑它有点让您满意

.myfooter 
    { 
    position:fixed; 
    bottom:0; 
    }

来源

2014-12-19 03:28:41 Ziddorino

为什么我的按钮位置会影响列表的位置？

回答

相关问题