HTML/CSS Pushing element's bottom border till the end of screen, if using 960 grid

StackOverflow https://stackoverflow.com/questions/16848230

  •  30-05-2022
  •  | 
  •  

题

I just started making website layout using 960 grid system made by nathansmith and can't figure out how to push the element's bottom border till the end of screen, while keeping the element within container div.

Please see the image for visual explanation. Here is bigger image version. How can I archieve the 2nd result?

1st img you can see that it has its normal fixed width and 2nd the border is pushed to the edge. How can I archieve the 2nd result?

P.S. Before menu there normally is logo image floated to the right;

Thank you in advance.

有帮助吗？

解决方案

Here's a simple way to do that: 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>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top