Question

我一年多没有编码所以我有点生疏了。我正在尝试将菜单修复到div“wrapper”的右下角，但它固定在屏幕的右下角。

<div id="wrapper">

<header>

<ul id="menu">
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="faq.html">FAQ</a></li>
	<li><a href="other.html">Other</a></li>
</ul>

</div>

和css

 #wrapper {
	width: 1840px;
	margin: 0px auto;
	text-align: left;
	padding: 15px;
	background-color: #F0E0B2;
	}

#menu, #menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

#menu {
	position: fixed;
    bottom: 0;
    right: 0;
	width: 759px;
	border-right: 1px solid #C0B38E;
    background-color: #F0E0B2;
	}

Answer 1

如果你看这里：http://www.w3schools.com/cssref/pr_class_position.asp，position：fixed是相对于浏览器窗口的。你需要使用position：absolute，它相对于最近的父div，其位置为：relative。我相信你想要类似的东西（注意位置：固定在#wrapper和position：绝对的#menu上）：

#wrapper {
    width: 1840px;
    height: 300px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    background-color: #F0E0B2;
    position: fixed;
}

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 759px;
    border-right: 1px solid #C0B38E;
    background-color: #F0E0B2;
}

Answer 2

这应该这样做。父容器需要position: relative;，以便可以正确定位子项。

#wrapper {
    width: 1840px;
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    background-color: #F0E0B2;
    position: relative;
    }

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

#menu {
    position: relative;
    bottom: 0;
    right: 0;
    width: 759px;
    border-right: 1px solid #C0B38E;
    background-color: #F0E0B2;
    }

Answer 3

我觉得你看起来像这样。我希望它会对你有所帮助。

<强> DEMO

#wrapper {
    width:1840px;
    margin: 0px auto;
    /*text-align: left;*/
    padding:15px;
    background-color: #F0E0B2;
    position: relative;
    }

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

#menu {
    position: absolute;
    bottom: 0;
    right: 0;
    border-right: 1px solid #C0B38E;
    background-color:red;
    }
ul#menu li{
    text-align: right;
    padding-right: 5px;
    float: left;
    }

位置固定在页面的底角而不是div的底角

3 个答案: