Question

我试图将透明导航框向下移动到容器的底部，但每次我向#navigation添加margin-top时，它都会向下移动整个容器。

这是HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About Me</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="navigation">
<ul>
<li class="buttons">About</li>
<li class="buttons">Experience</li>
<li class="buttons">Websites</li>
<li class="buttons">School</li>
<li class="buttons">Future</li>
</ul>
</div><!--end of navigation-->
</div><!--end of container-->
</body>
</html>

这里是CSS

@charset "utf-8";
/* CSS Document */

body {
background: #5D5D5D;
}

#container {
width:1200px;
height:800px;
position:relative;
margin:auto;
background-color:#B5B5B5;
border-radius:200px;
}

#navigation ul li {
list-style-type:none;
display:inline-table;   
}



.buttons {
width:100px;
height:100px;
background: #D1D1D1;
border-radius:200px;
-webkit-border-radius:200px;
line-height:100px;
text-align:center;
margin-right:10px;
box-shadow:0 3px 3px 3px rgba(0,0,0,0.15);
margin-top:7px;
transition:all 0.3s;
-webkit-transition:all 0.3s;
border: 3px solid #D1D1D1;
}

.buttons:hover {
background: #DFDFDF;
cursor:pointer;
border: 3px dotted #515151;
}   

#navigation {   
background: rgba(0,0,0,0.15);
width:700px;
height:120px;
border-radius:50px;
text-align:center;
}

JSFIDDLE链接：http://jsfiddle.net/RX94a/

Answer 1

您可以使用相对定位来向下移动导航栏。

#navigation {
/* Navigation has moved down */
position: relative;
top: 680px;

680px来自容器的高度减去导航框的高度。

这里是fiddle。

Answer 2

navigation {
    background: rgba(0, 0, 0, 0.15);
    width: 700px;
    border - radius: 50px;
    text - align: center;
    position: absolute;
    bottom: 0;
}

Jsfiddle链接：http://jsfiddle.net/RX94a/4/

Answer 3

Margin-top会影响元素与网页顶部之间的整体间距。但通过定位，您可以将元素准确定位到您想要的位置。我不确定这是不是你在说什么。

    #navigation{

    position:absolute;
    bottom:20px;
}

结果如下：jsFiddle

如何在不移动整个容器的情况下向下移动此导航栏

3 个答案: