HTML/CSS 960 격자를 사용하는 경우 요소의 아래쪽 테두리를 밀 때까지

방금 Nathansmith가 만든 960 격자 시스템을 사용하여 웹 사이트 레이아웃을 만들기 시작했으며 요소의 아래쪽 테두리를 끝까지 밀어 넣는 방법을 알 수 없습니다 화면에서 컨테이너 div 내에 요소를 유지합니다.HTML/CSS 960 격자를 사용하는 경우 요소의 아래쪽 테두리를 밀 때까지

시각적 인 설명은 이미지를 참조하십시오. Here is bigger image version. How can I archieve the 2nd result?

첫 번째 img은 정상적인 고정 너비를 가지고 있으며 두 번째로 테두리가 가장자리로 밀려 있다는 것을 알 수 있습니다. 어떻게 두 번째 결과를 얻을 수 있습니까?

P. 메뉴 이전에는 일반적으로 로고 이미지가 오른쪽으로 떠있었습니다.

미리 감사드립니다.

출처

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 960 격자를 사용하는 경우 요소의 아래쪽 테두리를 밀 때까지

답변

관련 문제