border 디자인 및 공지사항 디자인

Question

1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다. 2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요? 다시 검토해보아도 잘못된 부분을 못찾겠습니다

코딩웍스(Coding Works) · Answer

1) 가로 네비게이션에서 서브메뉴 a태그 갯수로 인해 이렇게 되는 부분은 어떻게 해결하면 좋을까요? 저부분에 border가 없습니다. .sub-menu 밑에 a가 4개 있는 것을 기준으로 .sub-menu에 높이(height)를 주세요. 물론 실무에서는 min-height라는 속성을 사용하는 것이 효율적이지만 지금은 시험이니까 그냥 height를 사용하세요. 2) .btn span에 margin-bottom:-5px; 이라 입력했는데 위의 이미지처럼 span보다 아래 보더가 위로 올라오는데, 뭐가 잘못된걸까요? 다시 검토해보아도 잘못된 부분을 못찾겠습니다. 아래처럼 주시면 .btn이 .tab1, .tab2 보다 우선해서 위로 올라갑니다. .btn { position: relative; } .btn span { position: relative; } 여기에 주셔도 됩니다. 기존에 있는 상태로는 .btn span에 주신 display: block을 display: inline-block 으로 바꿔주세요. 최종본 다운로드 해서 보시면 display: inline-block 이렇게 되어 있어요. display: block으로 했을 때 적용이 안되는 부분은 이 부분은 저도 처음 봤어요. 왜 그런지는 연구중입니다. 일단 말씀드린 부분으로 해결하세요. .btn {} .btn span { display: inline-block; }