탐색의 헤더 컨테이너가 표시되지 않습니다.

Question

header.main-header 요소에 문제가 있습니다. 헤더가 뷰포트에 표시되지 않습니다. 높이 값을 삽입하여 표시되도록했습니다. 누군가가 나를 도와주고 높이가 삽입되지 않은 경우 눈에 보이지 않는 이유를 설명 할 수 있습니까?

.main-header { 
 
    background: yellow; 
 
    padding: 0 3em; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    height: 85px; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.main-nav { 
 
    position: relative; 
 
} 
 

 
.nav-left { 
 
    float: left; 
 
} 
 

 
.nav-right { 
 
    float: right; 
 
} 
 

 
.middle { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%,0); 
 
} 
 

 
.nav-right li { 
 
    display: inline-block; 
 
}

<header class="main-header"> 
 
<nav class="main-nav"> 
 
    <ul class="nav-left"> 
 
    <li><a href="">Try Dropbox Business</a></li> 
 
    </ul> 
 

 
<div class="middle"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Dropbox_logo_%28September_2013%29.svg/200px-Dropbox_logo_%28September_2013%29.svg.png" alt="Dropbox Logo" /> 
 
</div> 
 

 
    <ul class="nav-right"> 
 
    <a href="#">Download the app</a> 
 
    <li><a href="#">Sign in</a></li> 
 
    </ul> 
 
</nav> 
 
</header>

여기 Codepen에서 내 작품이다 : http://codepen.io/marcvs/pen/Gjwdov?editors=1100

또한, 탐색 내부 요소의 위치에 대해 내가 왼쪽/중심에서 요소를 배치하기 위해 최선을 시도/중간. 그러나 네비게이션 바의 오른쪽은 오른쪽으로 확장되어 있으며 하단 스크롤 바를 제공합니다. 요소를 게시하는 가장 좋은 방법은 무엇입니까?

제 작업 개선을위한 조언을 보내주십시오. 고맙습니다.

Answer 1

당신은 그 헤더를 달성하기 위해 너무 많은 스타일을 추가 할 필요가 없습니다 :

시작을 메인 헤더 태그보고. 기본 헤더의 너비가 페이지의 100 %이면 하위 블록 탐색도 100 %가됩니다.

이제 백분율을 사용하여 메뉴를 헤더에 맞 춥니 다. 네비게이션에는 3 명의 자녀가 있으므로 각 너비를 너비의 1/3로 설정할 수 있습니다. 테두리와 패딩이 중요하다는 것을 명심하십시오. (각 30 %의 너비를 사용해보십시오. 그 중 3 개의 모든 어린이에 플로트가 붙어 있습니다.)

Answer 2

 
You need to put clear after last ul where is float:right; 

Because you have float, and parent element doesn't have height when float is there. 

So after last ul put div class="clear" with css .clear {clear:both;} 

Or if you are using bootstrap you have class clearfix. pun in nav class="main-nav clearfix"