코딩 슬라임 공방

상단메뉴바,사이드메뉴바,컨텐츠박스 본문

HTML_CSS_JAVA SCRIPT 수업

상단메뉴바,사이드메뉴바,컨텐츠박스

Nixpluvia 2020. 4. 28. 23:00

하위메뉴 표시 조심

하위 메뉴 표시 때문에 박스 크기가 바뀌어서 약간의 빈틈이 생긴다.

1차에서 2차메뉴 사이의 빈틈은 ul과 li태그가 기본적으로 block과 같은 display크기를 가지고 있어서

사이드 메뉴 바가 적당한 width를 가지고 있지 않으면 추가되는

[+][-]때문에 박스 사이즈가 달라지기 때문에 틈이 벌어 질 수 있다.

2차,3차 메뉴박스가 최소한의 길이를 가져야한다는 조건하에서

2차,3차 메뉴들은 박스에 사이즈를 주지 않으면 메뉴 텍스트들이 자동 줄바꿈이 되어버려서 세로줄이 되어버린다.

세로줄이 되어버리는 이유는 position:absolute를 주었기 때문에 너비가 최소화 되려고 한다.

해결 방법은 박스에 사이즈를 강제로 부여하거나 메뉴 텍스트에 white-space:nowrap 를 넣어서 줄바꿈을 금지시켜서 한줄로 표시되게 해야한다.

Comments