내비게이션 요소도 한 줄에 머물러 있습니다.

Question

브라우저 창이 전체 화면보다 조금 작을 때 nav는 두 줄로 표시됩니다 ... 나는 그 탐색에 많은 요소가 있습니다 ... 아이디어가 너무 많습니다. 한 줄에있어?

CSS :

nav { 
    position : absolute; 
    top : 10%; 
    left : 8%; 
    background : #A2A2A2; 
    width : 80%; 
    height:5%; 
    font-size : 20px; 
    margin-left : 2%; 
    box-shadow : 0 4px 2px -2px gray; 
    text-align: center; 
} 

HTML :

<nav>| 
      <a id="active" class="meniu" href="#">Home</a> | 
      <a class="meniu" href="el2/">Element 2</a> | 
      <a class="meniu" href="el3/">Element 3</a> | 
      <a class="meniu" href="el4/">Element 4</a> | 
      <a class="meniu" href="el5/">Element 5</a> | 
      <a class="meniu" href="el6/">Element 6</a> |&nbsp; 
     </nav> 

내가 사용하는 (내가 더 나은 이해를위한 실제 링크 제거) :

• HTML5
• CSS3
• 을 DOCTYPE html

감사합니다.

Answer 1

HTML :

이

<nav class="primary-nav" role="navigation"> 
    <ul class="primary-nav-list"> 
     <li><a href="#" title="Item 1">Item 1</a></li> 
     <li><a href="#" title="Item 2">Item 2</a></li> 
     <li><a href="#" title="Item 3">Item 3</a></li> 
    </ul><!--//END .primary-nav-list--> 
</nav><!--//END .primary-nav--> 

CSS :

.primary-nav-list { 
    list-style: none; 
    text-align: center; 
} 

.primary-nav-list > li { 
    display: inline-block; 
} 

.primary-nav-list > li > a { 
    padding: 5px 8px; 
    background: #cccccc; 
    display: block; 
    text-decoration: none; 
} 

.primary-nav-list > li > a:hover { 
    background: #f9f9f9; 
} 

부모 컨테이너가 백분율로 설정하고, 윈도우의 폭이 인라인의 결합 된 폭을 타협하는 경우 "리"요소를, ' 다음 라인으로 떨어질 것입니다. 미디어 쿼리를 사용하여 브라우저의 너비를 감지하고 요소를 재구성하거나 (응답 가능) 부모 컨테이너에 고정 폭을 설정하는 것이 좋습니다.

Answer 2

당신이 원하는 것을 얻기 위해, 당신은 사용해야합니다

nav { 
    white-space: nowrap; 
} 

나는 그것이 최선의 방법하지라고 생각합니다. 반응 형 레이아웃을 사용하는 것이 좋습니다. 모바일보기에서 시작하여 웹 응용 프로그램에 대한 CSS 규칙을 구현해야합니다.

예는 다음과 같은 하나입니다

이

<nav> 
    <a href="#" id="equiv">&equiv;</a> 
    <ul> 
     <li><a href="#">link1</a></li> 
     .... 
    </ul> 
</nav> 

nav:hover ul, nav:active ul, nav:focus ul { 
    display: block; 
} 

nav ul { 
    clear:both; 
    display: none; 
} 

nav ul li a { 
    display: block; 
} 

@media (min-width: 37em) { 

nav #equiv { 
    display: none; 
} 

nav ul { 
     display: block; 
} 
} 

당신은 모든 모바일 장치에 대해, 그것을 폐쇄하고 다른 사람에 보여 미디어 쿼리를 사용하여/개방의 메뉴 버튼을 보여주는 메뉴를 숨길 수 (태블릿, 데스크톱).