我刚开始使用 nathansmith 制作的 960 网格系统制作网站布局，无法弄清楚如何将元素的底部边框推到屏幕末尾，同时将元素保持在容器 div 中。
请查看图像以进行直观解释。 Here is bigger image version .
1st img 你可以看到它有正常的固定宽度，2nd 边框被推到边缘。我怎样才能获得第二个结果？
附言菜单前通常有 float 在右侧的 Logo 图像；
提前谢谢你。
最佳答案
这是一个简单的方法:http://codepen.io/pageaffairs/pen/mvjxc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body, ul, li {margin: 0; padding: 0;}
.wrap {width: 900px; margin: 0 auto; background: #e7e7e7; min-height: 600px;}
.menu {list-style: none; float: right; position: relative;}
.menu li {float: left; margin-left: 20px;}
.menu li:first-child {margin-left: 0;}
.menu li a {text-decoration: none; display: block; line-height: 2em; text-transform: uppercase;}
.menu li a:hover {text-decoration: underline;}
.menu:after {
content: "";
height:0;
width: 9999px;
border-bottom: 1px solid #ccc;
position: absolute;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="menu">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>
</body>
</html>
关于如果使用 960 网格，HTML/CSS 将元素的底部边框推到屏幕末尾，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16848230/