HTML/CSS Нижняя граница элемента pushing до конца экрана, если используется сетка 960

Я только начал создавать макет сайта с использованием сетки 960, сделанной nathansmith, и не может понять, как нажать нижнюю границу элемента до конца экран, сохраняя элемент в контейнере div.HTML/CSS Нижняя граница элемента pushing до конца экрана, если используется сетка 960

Пожалуйста, смотрите изображение для получения более подробной информации. Here is bigger image version. How can I archieve the 2nd result?

1-й img, вы можете видеть, что он имеет нормальную фиксированную ширину, а 2-ая граница выталкивается к краю. Как я могу архивировать второй результат?

P.S. Перед меню обычно изображение логотипа перемещается вправо;

Заранее спасибо.

источник

2013-05-31 Ricards Mucelans

Вот простой способ сделать это: 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>

источник

2013-05-31 01:17:02

О боже! Спасибо, Ральф. :))) –

Добро пожаловать. :-) –

HTML/CSS Нижняя граница элемента pushing до конца экрана, если используется сетка 960

ответ

Смежные вопросы