UL의 크기는 내가 노력하지 주위의 모든 자식 요소

Question

는 HTML이 같이 보이는 탭 탐색 요소를 만드는 것입니다 .

내 질문은 : ul이 모든 li 요소를 수용 할만큼 충분히 크지 않은 이유는 무엇입니까? li 요소에 추가 된 테두리 또는 패딩의 영향을받지 않는 것 같습니다.

Answer 1

대신

.nav li { 
    display: inline; 
    top: 9px; 
} 

사용

.nav li { 
    display: inline-block; 
} 

Demo

가 블록 인 경우 그 때 밀어 상자 블록을 생성하지 않기 때문에, inline를 사용하지 마십시오 <ul> ' 바닥.

top: 9px은 <li>을 아래쪽으로 이동하기 때문에 <ul> 외부로 이동해야합니다.

Answer 2

여전히 인라인 요소 인 동안 li에 패딩을 넣고 있습니다. 또한 top: 8px을 사용하면 문제가 더욱 복잡해집니다. 수정해야 할 몇 가지 옵션이 있습니다. 1 : li을 display: inline-block으로 만들고 top: 8px 또는 2를 제거합니다. li을 플로트하고 ul에 clearfix를 사용합니다. 희망은 그 말이 맞습니다.

option 1 demo

option 2 demo