Question

我刚开始使用nathansmith制作的960网格系统进行网站布局，并且无法弄清楚如何将元素的底部边框推到屏幕的末端，同时将元素保持在容器div中。 / p>

请参阅图片以获取直观说明。 Here is bigger image version。 How can I archieve the 2nd result?

1 img你可以看到它有正常的固定宽度，第二个边框被推到边缘。我怎样才能达到第二个结果？

P.S。在菜单之前，通常会在右侧浮动徽标图像;

提前谢谢。

Answer 1

这是一种简单的方法：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>

HTML / CSS如果使用960网格，则推送元素的底部边框直到屏幕结束

1 个答案: