Question

我正在使用html和css创建一个网页，我在页面底部放置了一个水平列表，但是当我在页面中心添加一个按钮时，它会将列表向下推到页面的下方。

＆＃13;

 .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;
 }

＆＃13;

<!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>

＆＃13;

Answer 1

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

我猜你会想找一个粘性的页脚＆＃39; （导航将显示在空白屏幕的底部，但如果页面内容满足，则需要向下滚动）或者可能是具有固定位置的页脚（始终位于屏幕底部）。

要实现固定页脚，您可以按如下方式更改导航类：

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

bottom:0;表示您希望导航从屏幕底部变为0px。 position:fixed告诉元素使用浏览器窗口定位自己，而不是其他元素（例如按钮）。

在此jsfiddle

上查看

Answer 2

将导航margin-top的值更改为200px或更低。

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

Answer 3

@ zigg76如果您的目标是使用粘性页脚，您可以使用以下css并对其进行一点编辑以满足您的需求

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

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

3 个答案: