디스플레이 : 블록이 nav 요소를 스택에 넣지 않습니다.

Question

nav 요소가 실제로 블록 요소처럼 동작하도록하는 데 약간의 문제가 있습니다. 나는 보통의 ul과 li 태그 대신에 탐색 메뉴와 태그를 만들려고했다. 그것은 계획대로 진행되지 않았습니다. 내 메뉴는 display : block css가 아무 효과가없는 것처럼 서로 후에 표시됩니다. 나는 쌓아 올릴 메뉴를 얻고 싶습니다. 서로 뒤집어 쓰지 마세요.

html로 :

<nav id="mainmenu"> 
    <a href="#">Item1</a> 
    <a href="#">Item2</a> 
    <a href="#">Item3</a> 
<nav> 
<nav id="submenu"> 
    <a href="#">Item1</a> 
    <a href="#">Item2</a> 
    <a href="#">Item3</a> 
<nav> 

CSS의 :

nav{ 
    display: block; 
} 

편집 :

이 내가 그것을 설정할 수 싶습니다 방법하지만 난이 (가)를 떠 원합니다 요소 그래서 나는 인라인 블록과 간격 문제가 발생하지 않습니다.

http://jsfiddle.net/Kpv5H/2/

난 여전히 부동이 태그는 탐색 요소가 블록 인 경우 모든 태그 인라인을 표시하게하는 이유를 이해하지?

http://jsfiddle.net/Kpv5H/4/

나는 그들이 올바른 맞 춥니 태그를 unfloat 경우 그러나 나는 상단과 태그의 하단에있는 패딩을 잃게됩니다. display : block을 추가하여 모든 태그가 서로의 위에 쌓이는 것을 수정하십시오. 플로트로 수정하려고하면 쇼를 인라인으로 둡니다.

태그의 인라인 블록이 문제를 해결 한 것으로 보이지만 대신 간격 문제가 발생합니다.

nav 요소를 쌓을 수있는 방법이 있습니까? a 요소를 떠 다니고 여전히 padding을 a 요소로 유지하고 있습니까?

Answer 1

편집 : * INLINE-BLOCK TECHNIQUE 사용함으로써 *

을 (OP에서 자세한 내용을 추가 한 후) : 사용자가 설정 한 경우 inline-block를 사용하여

을 font-size:0px;nav에 (주 컨테이너는 inline-block을 가진 요소) 다음에 오는 여분의 간격을 얻지 못합니다.

SEE DEMO

nav에 font-size:0px;를 추가하지 않고 그것과 같이 표시됩니다 : 당신의 nav 요소를 방지하기 위해 당신이 overflow:hidden을 추가 할 필요가

과 width :

SEE DEMO

FLOAT 기술을 이용하여 부유하다.

nav { 
    display: block; 
    overflow:hidden; /* Added */ 
    width: 100%; /* Added */ 
} 

nav a { 
    float: left; 
    padding: 2em; 
}​ 

SEE DEMO